tab栏切换样式

JS代码
  <script>
         function tablan(){
             let ul=document.querySelector(".nav ul")
             let lis=ul.querySelectorAll('.nav ul li');
             let div=document.querySelectorAll('.nav .conter div');
             //遍历所有li
             for(i=0;i<lis.length;i++){
                lis[i].setAttribute("index",i)//给每个li设置索引 
                //给li绑定点击事件
                lis[i].onclick=function(){
                    //获得当前索引
                        for(j=0;j<lis.length;j++){
                            //先清除li的样式
                            lis[j].className='';
                            //隐藏div
                            div[j].style.display='none';
                        }
                        //当点击当前的li给这个li添加tab-1样式
                        this.className='tab-1';
                        //当鼠标点击这个属性就是当前这个索引
                        let thisIndex=this.getAttribute("index");
                        //点击li当前的div和li索引相同的div显示
                        div[thisIndex].style.display="block";
                }
             }
         }

         tablan();
    </script>

  <style>
         *{
             margin: 0px;
             padding: 0px;
         }
         a{
             text-decoration: none;
         }
           .nav{
               width:1200px;
               margin: 40px auto;
               border: 1px solid gray;
               position: relative;
           }
           /* .nav>ul::after{
               content: '';
               display: block;
               clear: both;
           } */
           .nav>ul{
               width: 1200px;
               list-style: none;
               display: flex;
               justify-content: space-around;
           }
        .nav>ul>li{
            width: 200px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            background: pink;
             /* float: left; */
        }
        .nav>ul>.tab-1{
             background: blue;
        }
        .nav>ul>li>a{
            color: grey;
        }

        .nav>.conter{
            width: 1200px;
            height: 800px;
            overflow: hidden;
            /* border: 1px solid gray; */
            position: absolute;
            top: 60px;
            left: 0px;
        }
        .nav>.conter>div{
            width: 1200px;
            height: 800px;
            border: 1px solid gray;
            box-sizing: border-box;
            text-align: center;
            font-size: 40px;
            line-height: 800px;
        }
     </style>

 <div class="nav">
       <ul>
           <li class="tab-1">
               <a href="javascript:;">
                   新闻页面
               </a>
            </li>
           <li>
               <a href="javascript:;">
                  菜单栏
               </a>
            </li>
           <li>
               <a href="javascript:;">
                   信息服务
               </a>
            </li>
           <li>
               <a href="javascript:;">
                  资讯业务
               </a>
            </li>
       </ul>
       <div class="conter">
           <div>1</div>
           <div>2</div>
           <div>3</div>
           <div>4</div>
        </div>   
    </div>