文章描述：tab切换示例代码
<!--html-->
<section class="tabContent">
<div class="tabTit" id="tabTit">
<span class="active"> 标题1 </span>
<span> 标题2 </span>
<span> 标题3 </span>
</div>
<ul class="tabCon" id="tabCon" >
<li class="conItem"> 内容1 </li>
<li class="conItem"> 内容2 </li>
<li class="conItem"> 内容3 </li>
</ul>
</section>
/*css*/
*{list-style:none;margin:0;padding:0;}
.tabContent{width:300px;height:300px;margin:40px auto;}
.tabTit {width:100%;display:flex;align-items:center;}
.tabTit span{width:calc(100% / 3);height:40px;font-size:16px;color:#55658e;background:#f3f3f3;display:flex;align-items:center;justify-content: center;cursor:pointer;}
.tabTit span.active{background:#e6e8ff;color:#111;font-weight:bold;font-size:18px;}
.tabCon{width:100%;height:calc(100% - 40px);background:#f8f9FF;}
.tabCon .conItem{display:none;width:100%;padding:30px 0;text-align:center;font-size:16px;color:#333;}
//js
$(function(){
$("#tabCon").find(".conItem:first").show(); //第一个conItem 元素显示
$("#tabTit span").on("click",function(){ //为标题span标签添加事件
var index=$(this).index(); //获取当前span标签的个数
$(this).parent().next().find(".conItem").hide().eq(index).show(); //返回上一层，在下面查找css名为conItem隐藏，然后选中的显示
$(this).addClass("active").siblings().removeClass("active"); //span标签显示，同辈元素隐藏
})
})
tab切换示例图.jpg
文章来源于：http://www.jq22.com/webqd358
注：较转载内容有些许调整，读者可自行选择查看，谢谢关注支持！
