tab-switch 樣式的新增 與 tab元素樣式的切換

要點：

1.多個div類名相同情況下新增class樣式

2.siblings() 方法返回被選元素的所有同級元素。DOM 樹：該方法沿著 DOM 元素的同級元素向前和向後遍歷。

3.利用索引，只新增當前等於該索引的.tab-switch-item，其他通過遍歷siblings()移除.on樣式

方式一：

$(document).ready(()=>{

   $('.tab-switch-item').on('click',function(){

      //通過 .index()方法獲取元素下標，從0開始，賦值給某個變數

          var _index = $(this).index();

      //讓內容框的第 _index個顯示出來，其他的被隱藏

          $('.tab-switch-item').eq(_index).addClass('on').siblings().removeClass('on')

      //改變選中時候的選項框的樣式，移除其他幾個選項的樣式

        //  $(this).addClass('on').siblings().removeClass('on');

         

   })

})

 

方式二：

$(document).ready(()=>{

   $('.tab-switch-item').on('click',function(){

      //通過 .index()方法獲取元素下標，從0開始，賦值給某個變數

          var _index = $(this).index();

      //讓內容框的第 _index個顯示出來

          $('.tab-switch-item').eq(_index).addClass('on')

      //改變選中時候的選項框的樣式，移除其他幾個選項的樣式      

  $(this).addClass('on').siblings().removeClass('on');

         

   })

})

 

注意：

$(this).addClass("on").siblings().removeClass("on").children('.tab).html() 的解釋
該元素增加一個類on同時它的兄弟元素去掉on類，並獲取它的子元素.tab裡的html內容;
siblings()起作用是篩選給定的同級同類元素（不包括給定元素本身）

運用:頁面標籤切換(切記負責點選切換的tab標籤的DIV不要與負責顯示內容的DIV為同級元素，要不然標籤也會被一同hide())

class為.tab-switch-item的div標籤 為三個、多個class為.level-box的DIV切換，（藍色下劃線class樣式為.on）

$(document).ready(function(){
        $(".tab-switch-item").click(function(){
        //通過 .index()方法獲取元素下標，從0開始，賦值給某個變數
            var index = $(this).index();
        //讓內容框的第 index 個顯示出來，其他的被隱藏
            $(".level-box").eq(index).show().siblings().hide();
        //改變選中時候的選項框的樣式，移除其他幾個選項的樣式
        $(this).addClass("on").siblings().removeClass("on");
        });
    });