Tab bar toggle style

JS Code 
  <script>
         function tablan(){
             let ul=document.querySelector(".nav ul")
             let lis=ul.querySelectorAll('.nav ul li');
             let div=document.querySelectorAll('.nav .conter div');
             // Traverse all of li
             for(i=0;i<lis.length;i++){
                lis[i].setAttribute("index",i)// For each li catalog index  
                // to li Bind click event 
                lis[i].onclick=function(){
                    // Get the current index 
                        for(j=0;j<lis.length;j++){
                            // Clear away first li The style of 
                            lis[j].className='';
                            // hide div
                            div[j].style.display='none';
                        }
                        // When clicking the current li Here it is li add to tab-1 style 
                        this.className='tab-1';
                        // When the mouse clicks this attribute, it is the current index 
                        let thisIndex=this.getAttribute("index");
                        // Click on li Current div and li The index is the same div Show 
                        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:;">
                    News page 
               </a>
            </li>
           <li>
               <a href="javascript:;">
                   menu bar 
               </a>
            </li>
           <li>
               <a href="javascript:;">
                    information service 
               </a>
            </li>
           <li>
               <a href="javascript:;">
                   Information business 
               </a>
            </li>
       </ul>
       <div class="conter">
           <div>1</div>
           <div>2</div>
           <div>3</div>
           <div>4</div>
        </div>   
    </div>