<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')
});