jquery最简单的tab切换写法

前端日常切图过程中经常用到tab效果，如果项目此效果应用较多我们可以考虑tab插件，但是单一地方用到我们可能需要自己写，毕竟插件或有很多代码用不到而占资源，下面为大家提供一个最简单的jquery Tab效果写法，了解一点jQeury语法就可看得懂！

html+css结构：

<style type="text/css">
.ul li.cur{color: red}
.tab-con{display: none;}
</style>
<div class="tab">
  <ul class="ul">
    <li class="cur">1</li>
    <li>2</li>
    <li>3</li>
  </ul>
   <div class="tab-main">
     <div class="tab-con">
     </div>
     <div class="tab-con">
     </div>
     <div class="tab-con">
     </div>
   </div>
</div>

jQuery（前提是引入了jq库）：

$(document).ready(function() {
   $(".tab .ul li:eq(0)").addClass('cur');
   $(".tab .tab-con:eq(0)").show();
    $(".tab .ul li").click(function() {
       $(".tab .ul li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
        $(".tab .tab-con").hide().eq($(this).index()).show();
    });
});

同结构：

 $(".tablist ul li").each(function(){
      $(this).hover(function() {
        var index = $(this).index();
        $(this).eq(index).addClass("cur").siblings().removeClass('cur');
        $(this).parent().parent().find('.tabCon .con').hide().eq(index).show();
    });
   })

同页面结构相同多个tab写法：

$(function() {
 $(".answer-tab").each(function(){
   $(this).find(".answer-tab-head ul li:eq(0)").addClass('active');
    $(this).find(".answer-tab-bodys .answer-tab-body:eq(0)").addClass('active');
      var tab = $(this);
      $(this).find(".answer-tab-head ul li").hover(function() {
      	//alert(tab)
      	var index = $(this).index();
      	//var index = $(this).attr('code');
      	//alert(index)
      	tab.find("ul li").eq(index).addClass("active").siblings().removeClass('active');
        //$(this).eq(index).addClass("active").siblings().removeClass('active');
        tab.find(".answer-tab-bodys .answer-tab-body").removeClass('active').eq(index).addClass('active');
    });
 })
});