常用tab切换-07

          <div class="box cl">
              <div class="tab" id="tab1">
                  <ul>
                        <li class="hover1">五金机械</li>
                        <li>家居礼品</li>
                        <li>服装纺织</li>
                        <li>建材灯饰</li>
                        <li>农林产地</li>
                        <li>化工原料</li>
                        <li>化工原料</li>
                  </ul>
               </div>
               <div class="tab_box" id="tab_box1">
                     <ul>
                           <li class="show1">
                                   <p>1、巨大流量：站内外全方位推广，炫铺流量提升2倍以上；</p>
            
                                   <p>2、精准买家：专属买家撮合匹配，抢占核心买家资源2个；</p>
            
                                   <p>3、搜索加权：搜索排名优先，百度搜索曝光机会增加80%；</p>
            
                                   <p>4、活动标识：统一活动标识，彰显您与众不同的"身份"；</p>
            
                                   <p> 5、物流补贴：您卖货，我补贴，并享受物流发货首单6折；</p>
            
                                   <p> 6、导购曝光：审核通过的商品均赠送导购1篇，吸引买家；</p>
                           </li>
                           
                           
                           <li>
                                   <p>1、巨大流量：站内外全方位推广，炫铺流量提升2倍以上；</p>
            
                                   <p>2、精准买家：专属买家撮合匹配，抢占核心买家资源2个；</p>
            
                                   <p>3、搜索加权：搜索排名优先，百度搜索曝光机会增加80%；</p>
            
                                   <p>4、活动标识：统一活动标识，彰显您与众不同的"身份"；</p>
            
                                   <p> 5、物流补贴：您卖货，我补贴，并享受物流发货首单6折；</p>
            
                                   <p> 6、导购曝光：审核通过的商品均赠送导购1篇，吸引买家；</p>
                           </li>
                          
                     </ul>
               </div>

           </div>

.box_1{ 728px; height:240px;}
.tab{ 782px; height:40px; margin:20px 0 0 20px; background:#aebeef;}
.tab ul li{ 110px; height:40px; line-height:40px; float:left; text-align:center; margin-right:2px; cursor:pointer;font-family:'5FAE8F6F96C59ED1','Hiragino Sans GB','5B8B4F53',sans-serif; font-size:14px; letter-spacing:1px; background:#5a92db; color:#FFF;}
.tab ul li.hover1{ background:#2f76d4; margin-right:0;}

.tab_box{ clear:both; 742px; height:220px; padding:10px 20px 10px 20px; margin-left:20px; background:#9eaee2;}
.tab_box ul li{ font-family:'5FAE8F6F96C59ED1','Hiragino Sans GB','5B8B4F53',sans-serif; height:220px; color:#FFF; display:none;}
.tab_box ul li.show1{ display:block;}
.tab_box ul li p{ line-height:34px; letter-spacing:1px;}

$(document).ready(function(){
    
    /*<!-------tab1--- 常用多个tab---->*/
    /*mouseover滑过事件@click点击事件*/
        function tabf(obj1,obj2,hover){
          obj1.mouseover(function(){
            var index=$(this).index();
            $(this).addClass(hover).siblings().removeClass(hover);
            obj2.hide().eq(index).show();
          });
        };
        tabf($("#tab1 ul li"),$("#tab_box1 ul li"),"hover1");
        //tabf($("#tab2 li"),$("#box2 ul"),"hover2");
        
        
        /*<!-------tab2--- 多种效果---->*/
        $( "#tab2 ul li" ).mouseover(function(){
           var index=$(this).index();
           /*var height=$('#tab_box2 ul li').height();
           var width=$('#tab_box2 ul li').width();*/
           $( this ).addClass( "hover1" ).siblings().removeClass("hover1");

        //效果1      突隐突现
          //$( "#tab_box2 ul li").hide().eq(index).show();
        //效果2     左隐左现
        //$( "#tab_box2 ul li").hide("fast").eq(index).show("slow");
        //效果3     渐隐渐现
        $( "#tab_box2 ul li").fadeOut("fast").eq(index).fadeIn(500);
        //效果4     向下显示   向上隐藏
        //$("#tab_box2 ul li).slideUp().eq(index).slideDown();
        //效果5     轮播式 上下显示
        //$( ".hbox" ).stop().animate({'marginTop':-height*index},500);
        //效果6     轮播式 左右显示
        //$( ".hbox" ).stop().animate({'marginLeft':-width*index},500);
        });


       /*<!-------tab3---延迟切换---->*/
        var repeat;
        $("#tab3 ul li").mouseover(function(){
               var index=$(this).index();
               var $this=$(this);
              //定时器所在
               repeat=setInterval(function(){
                      $this.addClass('hover1').siblings().removeClass('hover1');
                      $( "#tab_box3 ul li").hide().eq(index).show();
               },200);
               $(this).mouseout(function(){clearInterval(repeat)})
        });
       

      /*<!-------tab4---自动切换---->*/

     var repeat,
      num=0,
      index=$("#tab4 ul li").size();
       $("#tab4 ul li").mouseover(function(){
            var index=$(this).index();
            $(this).addClass("hover1").siblings().removeClass("hover1");
            $("#tab_box4 ul li").stop().hide().eq(index).show();
       });        
       $(".box_1").hover(function(){
              clearInterval(repeat)
            },function(){
                repeat=setInterval(function(){
                $("#tab4 ul li").eq(num).addClass("hover1").siblings().removeClass("hover1");
                $("#tab_box4 ul li").stop().hide().eq(num).show();
                num++;
                if(num>=index){num=0}
               },2200)
       }).trigger('mouseout')
    
    
});