jQuery Tab选项卡特效代码
目前Tab选项卡效果已经是遍地开花了，前一段在家闲着没事也鼓捣了个，话不多说，上代码，效果可看此jQuery Tab选项卡Demo页面。[code lang="html" title="HTML代码"]
<div class="tab">
<ul class="clearfix">
<li class="current"><a href="#">标签1</a></li>
<li><a href="#">标签2</a></li>
<li><a href="#">标签3</a></li>
</ul>
<div class="current">
<img src="images/upload/1.jpg" alt="1.jpg" /></div>
<div>
<img src="images/upload/2.jpg" alt="2.jpg" /></div>
<div>
<img src="images/upload/3.jpg" alt="3.jpg" /></div>
</div>
[/code]
[code lang="js" title="jQuery代码"]
function zvTab(){
var timeoutid;
$(".tab ul li").each(function(index){
$(this).mouseover(function(){
var t = $(this);
timeoutid = setTimeout(function(){
$(".tab ul li.current").removeClass("current");
t.addClass("current");
$(".tab div.current").removeClass("current");
$(".tab div").eq(index).addClass("current");
},300);
}).mouseout(function(){
clearTimeout(timeoutid);
});
});
}
[/code]
当然，这段JS代码要在JQ库被引入后且被执行才可用。
[code lang="css" title="CSS代码"]
.tab ul li {float:left;background:#CCC;margin-right:2px;border-bottom:2px solid #DDD;}
.tab ul li.current{background:#AAA;border-bottom:2px solid #AAA;}
.tab ul li a{color:#000;display:block;padding:5px 10px;}
.tab ul li.current a{color:#fff;display:block;padding:5px 10px;}
.tab div{display:none;}
.tab div.current{display:block;background:#AAA;color:#fff;padding:5px;margin-bottom:10px;}
[/code]