jQuery Tab选项卡特效代码

2011年09月23日 作者：zenoven
阅读：17,911 5评论
GD Star Rating
loading...

目前Tab选项卡效果已经是遍地开花了，前一段在家闲着没事也鼓捣了个，话不多说，上代码，效果可看此jQuery Tab选项卡Demo页面。

view source
print?
01<div class="tab">
02<ul class="clearfix">
03    <li class="current"><a href="#">标签1</a></li>
04    <li><a href="#">标签2</a></li>
05    <li><a href="#">标签3</a></li>
06</ul>
07<div class="current">
08 <img src="images/upload/1.jpg" alt="1.jpg" /></div>
09<div>
10 <img src="images/upload/2.jpg" alt="2.jpg" /></div>
11<div>
12 <img src="images/upload/3.jpg" alt="3.jpg" /></div>
13</div>

 

view source
print?
01function zvTab(){
02    var timeoutid;
03    $(".tab ul li").each(function(index){
04        $(this).mouseover(function(){
05            var t = $(this);
06            timeoutid = setTimeout(function(){
07                $(".tab ul li.current").removeClass("current");
08                t.addClass("current");
09                $(".tab div.current").removeClass("current");
10                $(".tab div").eq(index).addClass("current");
11            },300);
12        }).mouseout(function(){
13            clearTimeout(timeoutid);
14        });
15    });
16 
17}

当然，这段JS代码要在JQ库被引入后且被执行才可用。

view source
print?
01.tab ul li {float:left;background:#CCC;margin-right:2px;border-bottom:2px solid #DDD;}
02.tab ul li.current{background:#AAA;border-bottom:2px solid #AAA;}
03.tab ul li a{color:#000;display:block;padding:5px 10px;}
04.tab ul li.current a{color:#fff;display:block;padding:5px 10px;}
05.tab div{display:none;}
06.tab div.current{display:block;background:#AAA;color:#fff;padding:5px;margin-bottom:10px;}
jQuery Tab选项卡特效代码, 5.0 out of 5 based on 1 rating
分类 :  JS , 技术
标签 :  , ,

本文短网址： http://znv.cc/2r

本文链接地址：https://www.zenoven.com/technology/js/2011091570.html

已有5条评论 发表评论

  1. 一米 /

    把 t 后面的 ; 改成 ， 或者 timeoutid 前面加个 var 好点吧。

    GD Star Rating
    loading...
    回复
    1. zenoven / 本文作者

      嗯嗯，很早写的，不知道为毛没有加var，不过var也不能直接加在这里，作用域太小了，还是放到函数开始好了

      GD Star Rating
      loading...
      回复
      1. 一米 /

        我刚开始也一样啊，这个还是放到 each 函数最顶层最好了。

        GD Star Rating
        loading...
        回复
  2. 唯立 /

    :(2): 这个代码让我了解了延时切换的功能，之前我做的是用hover，没有用clearTimeout，鼠标放上去就切换，还是用clearTimeout稍微延时一下比较好。收藏了

    GD Star Rating
    loading...
    回复
  3. 淘宝返利网 /

    谢谢分享，学习了！

    GD Star Rating
    loading...
    回复

发表评论