tab栏切换，排他思想。

    <script>
      //获取元素
      var spanList = document.querySelectorAll("span");
      var liList = document.querySelectorAll("li");
      //遍历每个span
      for (let i = 0; i < spanList.length; i++) {
        // 注册事件
        spanList[i].onclick = function () {
          for (let j = 0; j < spanList.length; j++) {
            //排他思想
            if (j == i) {
              spanList[j].className = "current";
              liList[j].style.display = "block";
            } else {
              spanList[j].className = "";
              liList[j].style.display = "none";
            }
          }
        };
      }
```<script>
思路讲解
1.遍历切换栏选项卡
2.给每个切换栏选项卡注册事件
3.利用双循环依次判断两个元素是否相等，如果相等则设置相应的属性，如不相等则恢复默认。
4.因为用的是ES6的let则不需要获取当前点击按钮的索引



以下是var的使用需要获取点击按钮索引
```javascript
for (var i = 0; i < spanList.length; i++) {
      //2.1 给每一个span标签添加一个自定义index
      spanList[i].setAttribute('index', i);
      //2.2给每一个span标签添加点击事件
      spanList[i].onclick = function () {
        //3： 点击span标签，自身样式发生变化，对应下标的li模块显示
        //排他思想去除其他span的样式，并且隐藏其他模块li

        //3.1 获取当前点击的span下标
        var index = this.getAttribute('index');

        //3.2 排他思想去除其他span的样式，并且隐藏其他模块li
        for (var j = 0; j < spanList.length; j++) {
          if (j == index) {
            spanList[j].className = 'current';
            liList[j].style.display = 'block';
          } else {
            spanList[j].className = '';//自身类名清空
            liList[j].style.display = 'none';//对应j下标的模块li标签隐藏
          }
        }
      }
    }