$(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");
});
});
