选项卡：使用className

点击导航的时候,导航字体颜色变色，内容也跟着改变

DOM

<div class="boss">        
    <ul id="ul">            
       <li class="select">一</li>            
       <li>二</li>            
       <li>三</li>            
       <li>四</li>        
    </ul>        

   <div class="content">            
     <div class="box select">                
        <h1>我是第一个盒子</h1>            
     </div>            
     <div class="box">                
         <h1>我是第二个盒子</h1>            
     </div>            
     <div class="box">                
         <h1>我是第三个盒子</h1>            
      </div>           
      <div class="box">                
        <h1>我是第四个盒子</h1>            
      </div>       
    </div>    
 </div>

JS

const $=(str)=>document.querySelectorAll(str);  
// $("#ul li")===document.querySelectorAll("#ul li")
const li=$("#ul li");
const box=$(".box");

for(let i=0;i<li.length;i++){
  li[i].index=i;
  li[i].onclick=funciton(){
     for(let j=0;j<li.length;j++){
        li[j].className="";
        box[j].className="box"
     }
        this.className="select";
        box[this.index].className="select"
   }
}
 //this 指向的是li[i]  this.index指向的是li[i].index也就是最外层的i  
 // className只能有一个

下面这张图片红色方框部分方法效果一样  

classList.add classList.remove是一对

CSS

*{
    padding:0;
    margin:0;
}

.boss{
     width:400px;
     height:600px;
     background:darkseagreen;
     margin:0 auto;
     margin-top:20px;
}

#ul{
   width:100%;
   height:50px;
   background:darkseagreen;
}

#ul li{
   width:25%;
   height:50px;
   background:darkcyan;
   float:left;
   text-aligh:center;
   line-height:50px;
}

#ul li.select{
    color:white;
}

.box{
    display:none;
}

.box.select{
    display:bolok
}