使用js实现页面tab切换效果

使用js实现页面切换代码如下：
【HTML部分】

 <nav>
        <ul>
            <li class="hh"><a>星期一</a></li>
            <li><a>星期二</a></li>
            <li><a>星期三</a></li>
            <li><a>星期四</a></li>
            <li><a>星期五</a></li>
        </ul>
    </nav>
    <div class="content">
        <div class="one">
            吃烤肉
        </div>
        <div class="one">
            吃火锅
        </div>
        <div class="one">
            吃鸡腿
        </div>
        <div class="one">
            吃海鲜
        </div>
        <div class="one">
            吃白菜
        </div>
    </div>

【css部分代码】

<style>
        nav{
            margin: 0 auto;
            height:50px;
            width: 50%;
            background-color: pink;
            margin-top: 10%;
        }
        nav ul li{
            float: left;
        }
        nav ul li{
            line-height: 50px;
            font-size: 16px;
            padding: 0 35px;
        }
        nav ul  .hh:hover{
            background-color: rgb(117, 152, 218);
        }
        .content{
            height: 100%;
        }
        .one{
            width: 50%;
            height: 150px;
            background-color: aquamarine;
            margin: 0 auto;
             /* 隐藏 */
            display: none;
              /* 水平居中 */
            text-align: center;
             /* 垂直居中 */
            line-height: 150px;
        }
    </style>

【js部分】
具体代码解释已在代码注释中说明，如下：

<script>
        // 1.获取元素
        var nav=document.querySelector('nav');
        //获取所有的li
        var lis=nav.querySelectorAll('li');
       //获取所有的显示盒子
        var item=document.querySelectorAll('.one')
        // for循环绑定点击事件
        for(var i=0;i<lis.length;i++){
            //给每次的点击一个索引值
            lis[i].setAttribute('index',i);
            lis[i].onclick=function(){
                for(var i=0;i<lis.length;i++){
                    // 其余的li清除class类
                    lis[i].className='';
                }
                // 留下自己
                this.className='hh';
                //点击之后显示
                var index = this.getAttribute('index');
                //索引值打印，点击导航栏即可看到相应索引值
                console.log(index);
                // 将其他盒子隐藏
                for(var i=0;i<item.length;i++){
                    item[i].style.display='none'
                }

                // 谁点击，让点击的盒子显示出来
                item[index].style.display='block';
            }
        }
    </script>

运行结果如下：