要點：
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())該元素增加一個類on同時它的兄弟元素去掉on類，並獲取它的子元素.tab裡的html內容;
siblings()起作用是篩選給定的同級同類元素（不包括給定元素本身）
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");
});
});
$(".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");
});
});