选项卡一：使用classList

每个导航拥有不同景色， 在进行点击的时候切换背景色， 然后展示出相应的导航的内容

初始化的时候

点击“攻略”的时候

DOM结构

<div class="boss">
   <ul id="ul">
        <li class="li0 active0"></li>
        <li class="li1"></li>
        <li class=""li2></li>
        <li class="li3"></li>
   </ul>
   <div class="content">
       <div class="box" style="display:block">
         <h1>我是第一个盒子</h1>
       </div>
      <div class="box">
        <h1>我是第二个盒子</h2>
      </div>
      <div class="box">
         <h1>我是第三个盒子</h1>
      </div>
      <div class="box">
         <h1>我是第四个盒子</h1>
      </div>
   </div>

JS

  const arrLi=document.querySelectorAll("#ul li") //获取的将是一个数组  
  const arrBox=document.querySelectorAll(".box")  // 获取的将是一个数组

  for(let i=0;i<arrOl.length;i++){
     arrLi[i].index=i;   //每一个元素都需要有一个下标
     arrLi[i].onclick=function(){   //arrLi[i].onclick 每一个元素在进行点击的时候
       for(let j=0;j<arrLi.length;j++){
            arrLi[j].classList.remove("active"+j);   //去除增加的所有li的active类名

            //arrLi[i].className="li"+j                   //这样方法是让所有li的加上li的类名
            oBox[j].style.display="none"             //让所有oBox元素都不显示

        }
            this.classList.add("active"+this.index);      //给当前点击的li元素加上class名
            // this.className="active"+this.index         //给当前点击的li元素的加上class名
            oBox[this.index].style.display="block"  // 让当前点击的oBox元素显示出来
            //this 指向的是arrLi[i]    this.index指向的是arrLi[i].index 也就是最外层循环的i
    }
  }

// 注意：classList.add 和  classList.remove 为一对

CSS

*{
   padding:0;
   margin:0
}

li{
  list-style:none;
 }

.boss{
   width:400px;
   height:600px;
   background:darksalmon;
   margin:o auto;
   margin-top:30px;
}

#ul li{
   width:25%;
   height:50px;
   float:left;
}

#box{
  display:none;
}

.li0{
  background:url(./0.jpg)
}

.li1{
  background:url(./1.jpg)
}

.li2{
  background:url(./2.jpg)
}

.li3{
  background:url(./3.jpg)
}

.active0{
  background:url(./3.jpg)
}

.active1{
  background:url(./1.jpg)
}

.active2{
   background:url(./2.jpg)
}

.active3{
   background:ulr(./3.jpg)
 }