思路

• 首先,创建一个 '机器',这个机器可以帮我们批量生产 '选项卡'
• 在这个机器中,首先要获取元素
• 然后在这个机器的原型上写函数,在这个函数中可以实现对应的事件

代码

1. html + css

  <style>
    * {
      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: coral;
    }

    .content .active {
      display: block;
      background-color: forestgreen;
    }
  </style>
  
  <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>

2. js

function Tabs (ele) {
//获取标签
    this.ele = document.querySelector(ele)
    this.hLi = [...this.ele.querySelectorAll('.header li')]
    this.cLi = [...this.ele.querySelectorAll('.content li')]
    this.init()
}
//在原型上添加函数
Tabs.prototype.init = function(){
    let that = this
    //遍历数组找到每一个li
    this.hLi.forEach(function(item,index){
        //给每一个 li 添加点击事件
        item.onclick = function(){
            //在点击事件中,找到所有的 li
            that.hLi.forEach(function(li,liIndex){
                //给所有 li 取消类名
                li.classList.remove('active')
                that.cLi[liIndex].classList.remove('active)
            })
            //给当前点击的 li 添加类名
            item.classList.add('active)
            that.cLi[index].classList.add('active')
        }
    })
}
new Tabs('.box1')
new Tabs('.box2')