选项卡切换（排他法、轮转法、轮转法之事件委托）

选项卡需求：

tabbar content 两部分的内容一一对应，我们点击某一个tab的时候，该tab的类名设置为on，其他的tab要清除on类名，对应的content的类名要设置为 active ，其他的content清除active类名。

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>选项卡切换</title>
  <style>
 * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
    }

    html,
    body {
      height: 100%;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .wrap {
      display: flex;
      flex-direction: column;
      width: 600px;
      height: 320px;
      box-shadow: 0 0 4px #333;

    }

    .tab {
      display: flex;
      background-color: #666;
    }

    .tab li {
      width: 80px;
      height: 45px;
      line-height: 45px;
      font-size: 20px;
      text-align: center;
      color: #fff;
      background-color: #666;
      border-right: 2px solid orange;
      cursor: pointer;
    }

    .tab li:hover {
      opacity: .8;
    }

    .content {
      position: relative;
    }

    .content li {
      display: none;
      position: absolute;
      width: 100%;
      height: 220px;
      background-color: #368;
      color: #fff;
      font-size: 30px;
    }

    .tab li.on {
      background-color: #fff;
      color: orange;
      font-weight: 700;
    }

    .content li.active {
      display: block;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <ul class="tab">
      <li class="on">图片</li>
      <li>专栏</li>
      <li>热点</li>
    </ul>
    <ul class="content">
      <li class="active">我是图片的内容</li>
      <li>我是专栏的内容</li>
      <li>我是热点的内容</li>
    </ul>
  </div>
  <script>
    var aTab = document.querySelectorAll('.tab li');
    var oTab = document.querySelector('.tab');
    var aCon = document.querySelectorAll('.content li');
   
    // switchTab()

    //方法一：排他法 先把所有选项都重置 然后单独设置某一个
    // function switchTab() {
    //   for (var i = 0, len = aTab.length; i < len; i++) {
    //     (function (i) {
    //       aTab[i].onclick = function () {
    //         for (var j = 0; j < len; j++) {  //循环排他时消耗资源，优化轮转
    //           aTab[j].className = '';
    //           aCon[j].className = '';
    //         }
    //         aTab[i].className = 'on';
    //         aCon[i].className = 'active';
    //       }
    //     })(i)
    //   }
    // }

    //方法二：轮转法
    // function switchTab() {
    //   var index = 0;
    //   for (var i = 0, len = aTab.length; i < len; i++) {
    //     (function (i) {
    //       aTab[i].onclick = function () {    //循环绑定事件耗资源，优化事件委托
    //         aTab[index].className = '';
    //         aCon[index].className = '';
    //         index = i;
    //         aTab[index].className = 'on';
    //         aCon[index].className = 'active';
    //       }
    //     })(i);
    //   }
    // }

    //方法三：轮转法之事件委托优化 通过监听父元素的点击事件，找到点击的子元素下标
    var index = 0;
    oTab.onclick = function (e) {
      // console.log(e.target); //触发事件的DOM目标
      if (e.target.tagName.toLowerCase() === 'li') { //如果触发事件的目标是的标签名称是li的话  e.target.tagName返回的是大写
        oTab.children[index].className = '';
        aCon[index].className = '';
        index = getElementIdx(e.target);
        oTab.children[index].className = 'on';
        aCon[index].className = 'active';
      }
    }
    //获取元素的下标
    function getElementIdx (item) {
      var elements = item.parentNode.children;
      for (var i = 0, len = elements.length; i < len; i++) {
        if (item === elements[i]) {
          return i;
        }
      }
    }
  </script>
</body>
</html>