面向对象 重构版本

• 寻找一个“机器”，这个“机器”能够帮我们批量生产“选项卡”
• 目前来看并没有这个“机器”，那么我们就需要自己先创造一个“机器”

html

  <div class="box1">
    <ul class="header">
      <li class="active">header_1</li>
      <li>header_2</li>
      <li>header_3</li>
    </ul>
    <ol class="content">
      <li class="active">content_1</li>
      <li>content_2</li>
      <li>content_3</li>
    </ol>
  </div>

  <div class="box2">
    <ul class="header">
      <li class="active">header_1</li>
      <li>header_2</li>
      <li>header_3</li>
    </ul>
    <ol class="content">
      <li class="active">content_1</li>
      <li>content_2</li>
      <li>content_3</li>
    </ol>
  </div>

css

    * {
      margin: 0;
      padding: 0;
    }

    ul,
    ol {
      list-style: none;
    }

    .header {
      width: 600px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: aqua;
      display: flex;
    }

    .header li {
      width: 200px;
    }

    .content {
      width: 600px;
      height: 400px;
      line-height: 400px;
      text-align: center;
      font-size: 100px;
    }

    .content li {
      display: none;
    }

    .header .active {
      background-color: orange;
    }

    .content .active {
      display: block;
      background-color: yellow;
    }

js

    function Tabs(ele) {
      this.ele = document.querySelector(ele)
      // console.log(this.ele)
      // this.hLi = document.querySelector('.header li')
      this.hLi = [...this.ele.querySelectorAll('.header li')]
      this.cLi = [...this.ele.querySelectorAll('.content li')]
      // console.log(this.hLi)

      // 创建选项卡的一些代码
      this.init()
    }

    Tabs.prototype.init = function () {
      // console.log(123)
      // console.log(this)
      let that = this
      this.hLi.forEach(function (item, index) {
        item.onclick = function () {
          // 1.给所有的li全都取消类名
          that.hLi.forEach(function (li, liIndex) {
            li.classList.remove('active')
            that.cLi[liIndex].classList.remove('active')

          })
          // 2.给当前点击的li添加一个类名
          item.classList.add('active')
          that.cLi[index].classList.add('active')
        }
      })
    }

    // 构造函数内部的对象，我们存放到了常量 t1中
    const t1 = new Tabs('.box1') //现在就创建出来一个选项卡了
    /**
     * 函数内部的this，只会在调用的时候确定，通常指向调用者
     * 
     * t1.this() 中调用者为t1,所以函数init中的this就指向了t1
    */
    // t1.init()
    // const t2 = new Tabs('.box2')
    new Tabs('.box2')
    // t2.init()

面向过程版

js

    var headerLi = [...document.querySelectorAll('.box1 .header li')]
    var contentLi = [...document.querySelectorAll('.box1 .content li')]

    // 包含功能2
    headerLi.forEach(function (item, index) {
      item.onclick = function () {
        // 1.给所有的li全都取消类名
        headerLi.forEach(function (li, liIndex) {
          li.classList.remove('active')
          contentLi[liIndex].classList.remove('active')

        })
        // 2.给当前点击的li添加一个类名
        item.classList.add('active')
        contentLi[index].classList.add('active')
      }
    })