前端必学----tab切换

Tab切换有两个大的模块,点击某一个,当前这个底色和内容一一对应,(排他思想)

  <script>
    // 获取元素
    var tab_list = document.querySelector('.tab_list');
    var lis = tab_list.querySelectorAll('li');
    var items = document.querySelectorAll('.item');
    //for 循环绑定点击事件
    for (var i = 0; i < lis.length; i++){
      //开始给5个li 设置索引号
      lis[i].setAttribute('index',i)
      lis[i].onclick = function(){
        //干掉其他人 其余的li清除 class 在这个类
        for(var i = 0; i < lis.length; i++){
          lis[i].className = '';
        }
        //留下我自己
        this.className = 'current'
        //下面显示内容模块
        var index = this.getAttribute('index');
        //干掉其他人 让其他的item 这些div 隐藏
        for(var i = 0; i < items.length; i++;){
          items[i].style.display = 'none';
        }
        //点击那个显示哪一个
        items[i].style.display = 'block';
      }
    }
  </script>