選項卡效果實現

第一步：在body裡設定ul、li、div

<div id="tab">
      <ul>
        <li>新聞</li>
        <li class="selectedLi">電影</li>
        <li>音樂</li>
    </ul>
    <div>新聞的內容</div>
    <div class="selectedDiv">電影的內容</div>
    <div
 
>音樂的內容</div>
</div>

第二步：給內容設定樣式style

<style>
  *{ 
    margin: 0;
    padding: 0
}
ul{
    list-style: none;
    text-align: center;
}
#tab{
    width: 500px;
    margin: 0 auto;
}
#tab ul li{
    width: 120px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    display: inline-block
 
;
    border: 1px solid palegreen;
}
# tab ul li .selectedLi{
    background: palegreen;
}
#tab div {
    height: 250px;
    line-height: 250px;
    background: palegreen;
    display: none;
    text-align: center;
}
#tab div .selectedDiv {
    display: block;
}

</style>

第三步：在script中給li繫結事件

• 點選的li新增選中的類名，相應div也新增選中的類名，其他li和div移除類名
  1.獲取元素
  2.給每個li繫結點選事件
  
  1. 處理點選時的邏輯，當前點選的li和對應的div新增類名，其他的元素的類名都移除

var oTab = document.getElementById("tab"),
    oLis = oTab.getElementsByTagName("li"),
    oDiv = oTab.getElementsByTagName("div");

function  change(n) {
    //移除所有的li和div的class名
    for(var i = 0; i < oLis.length; i++){
        oLis[i].className = " ";
        oDiv[i].className = " "; 
  }
  //給當前的li和div新增類名
  //可以保證只有一個li和div是被選中的
  oLis[n].className = "selectedLi";
  oDiv[n].className = "selectedDiv";
}
//通過for迴圈獲取所有的li
//並給每個li繫結點選事件。
for (var i =0; i < oLis.length; i++){
        //通過自定義屬性的方式
        //將i的值儲存到num上
        oLis[i].num = i;
        oLis[i].onclick = function() {
          //this就是當前點選的元素  
          //this.num儲存的就是當前點選元素的索引
          change(this.num)
      }
}