jQuery tab切换示例

文章描述：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
注：较转载内容有些许调整，读者可自行选择查看，谢谢关注支持！