tab栏切换

第一步，先准备好选项模块

   <div class = "hid">
        <li class = "bg">我是标题1</li>
        <li>我是标题2</li>
        <li>我是标题3</li>
        <li>我是标题4</li>
        <li>我是标题5</li>
   </div>
    <div>我是内容111</div>
    <div>我是内容222</div>
    <div>我是内容333</div>
    <div>我是内容444</div>
    <div>我是内容555</div>

第二步，书写CSS样式，同时准备好样式类

先将小li浮动起来，同时取消浮动，并且给小li添加背景颜色；

<style>
.hid {
       display : none;//取消浮动
     }
li {
      list-style: none;
      float: left; //将小li浮动起来成一行
   }
   
.bg {
      background-color : red ;
      }
 </style>

第三步，将内容全部隐藏起来，因此需要全部添加一个类目：

    <div class = "content">我是内容111</div>
    <div class = "content">我是内容222</div>
    <div class = "content">我是内容333</div>
    <div class = "content">我是内容444</div>
    <div class = "content">我是内容555</div>

同时全部隐藏起来：

.content {
            display : none ;       
          }

这样css样式跟HTML就全部准备好了，接下来是JS部分

<script>
    window.addEventListener('load', function () {
        var tabs = document.querySelectorAll('li');//获取所有小li；
        var content = document.querySelectorAll(".content");//获取所有内容模块；
        for (var i = 0; i < tabs.length; i++) {
            tabs[i].setAttribute('index', i);//遍历所有小li，同时给加上自定义属性‘index’
            //设置监听小li被点击的时候，调用函数；
            tabs[i].addEventListener('click', function () {
                for (var i = 0; i < tabs.length; i++) {
               //清除所有的小li身上的类名；
                    tabs[i].className = "";
                }
                //被点击的这个小li加上背景类名；
                this.className = "bg";
                //声明一个index值，他的值等于小li身上添加的自定义属性；
                var index = this.getAttribute('index')
                //遍历内容模块，同时将所有内容全部隐藏起来
                for (var k = 0; k < content.length; k++) {
                    content[k].style.display = 'none'
                }
                //将内容模块中与索引值index值相同的子元素获取出来同时显示出来
                content[index].style.display = 'block'；
            })
        }   //默认显示内容模块第一个内容；
            content[0].style.display = 'block';
    })
</script>