简单版面向对象选项卡

最新推荐文章于 2024-05-31 14:59:34 发布

终究是雾散

最新推荐文章于 2024-05-31 14:59:34 发布

阅读量63

点赞数 1

分类专栏： JavaScript js基础练习题 HTML5 文章标签： css html css3 javascript 前端

本文链接：https://blog.csdn.net/SongLiang02_/article/details/129834070

版权

JavaScript 同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

js基础练习题

22 篇文章 0 订阅

订阅专栏

HTML5

6 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul, ol, li {
      list-style: none;
    }

    .tab {
      width: 600px;
      height: 400px;
      border: 10px solid #333;
      margin: 50px auto;
      display: flex;
      flex-direction: column;
    }

    ul {
      height: 60px;
      display: flex;
    }

    ul > li {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40px;
      color: #fff;
      background-color: skyblue;
      cursor: pointer;
    }

    ul > li.active {
      background-color: orange;
    }

    ol {
      flex: 1;
      position: relative;
    }

    ol > li {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      font-size: 100px;
      color: #fff;
      background-color: purple;
      display: none;
      justify-content: center;
      align-items: center;
    }

    ol > li.active {
      display: flex;
    }


  </style>
</head>
<body>

  <div class="tab" id="box">
    <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <ol>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
    </ol>
  </div>
  <div class="tab" id="box2">
    <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <ol>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ol>
  </div>

  <script>
    /*
      简单版面向对象选项卡

      1. 抽象内容
        + 一个能够完成选项卡的对象, 需要有哪些属性和方法
        + 属性: 所有可以点击的按钮盒子
        + 属性: 所有可以切换的选项盒子
        + 方法: 能添加点击事件的方法
      2. 书写构造函数
        + 能创建一个对象, 包含两个属性和一个方法
        + 属性直接写在构造函数体内
        + 方法写在构造函数的原型上
    */

    // 2. 书写构造函数
    function Tabs(ele) {
      // 范围
      this.ele = document.querySelector(ele)
      // 在范围内找到所有可以点击的盒子
      this.btns = this.ele.querySelectorAll('ul > li')
      // 在范围内找到所有需要切换显示的盒子
      this.tabs = this.ele.querySelectorAll('ol > li')
    }

    // 原型上书写方法
    Tabs.prototype.change = function () {
      // 执行给所有 btns 里面的 按钮添加点击事件
      // 我怎么拿到 btns
      // 绝对不能直接使用 t 这个变量
      // console.log(this.btns)

      // 提前保存一下 this
      var _this = this

      for (var i = 0; i < this.btns.length; i++) {
        // 提前保存索引
        this.btns[i].setAttribute('index', i)

        this.btns[i].addEventListener('click', function () {
          // console.log('我被点击了')
          // 需要让实例的 btns 里面的每一个没有 active 类名
          // 需要让实例的 tabs 里面的每一个没有 active 类名
          // 这里不是在 change 函数的作用域了, 而是事件处理函数的作用域
          // 在事件处理函数里面, this 指向当前事件的事件源
          // console.log(_this)
          // 当你访问 _this 的时候, 其实是在访问变量
          // 自己作用域没有, 就会去上一级作用域查找
          for (var j = 0; j < _this.btns.length; j++) {
            _this.btns[j].className = ''
            _this.tabs[j].className = ''
          }

          // 当前点击的这个 li 有 active 类名
          this.className = 'active'
          // 让 实例身上的 tabs 里面索引对应的哪一个 li 有 active 类名
          // 拿到当前 li 身上保存的 索引
          var index = this.getAttribute('index') - 0
          _this.tabs[index].className = 'active'
        })
      }
    }

    // 使用的时候
    // 选项卡就可以使用了
    var t = new Tabs('#box')
    // 实例对象在调用方法
    // 函数调用方式, 对象.函数名()
    // 函数内部的 this 就是指向 点 前面的 xxx
    // 我在 change 函数里面写的 this 就是 t
    t.change()

    // 实现第二个选项卡
    var t2 = new Tabs('#box2')
    t2.change()
  </script>
</body>
</html>