用 jQuery 实现灵活的 tab 切换效果

Tab 切换效果现在网上到处都是，特别是一些大型的门户，为了在有限的空间内呈现更多的内容，往往都采取了这种方式。腾讯的迷你首页就非常的典型。我以前用的 wordpresss 皮肤 iNove 中，其实也有这样的效果，就在 Trackbacks 和 Comments 的切换处，就是一个简单的应用。

寒假期间也给自己的博客搞了个，是用的 jQuery 实现的，实现的代码是从网上收集来的，自己感觉是非常不错的代码，非常简单，但不失灵活，而且很好的做到了表现和行为的分离。现在就跟大家分享一下，建议已经引入 jQuery 框架的同志们使用，如果因为这么几行代码而专门引入 jQuery ，感觉有点太夸张了，其实这样的 JS 代码网上多的是，随便 google 一下就 N 多了！！

效果预览

tab 效果

实例见文章的结尾处相关文章的部分。

实现思路

大家看源代码就应该能看到了，我这里三部分内容其实在页面加载的时候都加载了，只是只显示了一块，另外的两块隐藏。然后用 JS 和 CSS 来对鼠标动作进行响应，来达到所想来的效果。这个是 tab 切换效果的基本思路。当然同一些大型门户不同，他们的 tab 都实现了异步传输，即在页面加载的时候并不会加载，而是在需要的时候才从服务器进行传输并显示，这样在技术上显然会比较复杂，对于小网站来说，的确没多少必要！！

具体代码

这里只展示下我用到的代码并进行一些解释，大家可根据实现情况进行修改。

首先看 HTML

<div class="tab">
<p>
<span id="tab1">tab1</span>
<span id="tab2">tab2</span>
<span id="tab3">tab3</span></p>
<ul class="tab1">以 LI 形式呈现的 tab1 的内容</ul>
<ul class="tab2">以 LI 形式呈现的 tab2 的内容</ul>
<ul class="tab3">以 LI 形式呈现的 tab3 的内容</ul>
</div>

看下其实挺简单，一个 P 里三个 span ，然后对应三个 ul 列表，只需要对应的 span 的 ID 和 ul 的 class 一致就可以了。至于 ul 中的内容，就因人而异了！！

我这里是用了两个插件：WordPress Related Posts 和 WP-PostViews Plus 来调用相关文章和热门文章的。于是，我是代码是这样的：

<div class="entry-foot">
<p>
<span id="related_post">相关文章</span>
<span id="mhot">本月热门</span>
<span id="allhot">点击排行</span></p>
<?php wp23_related_posts();?>
<ul class="mhot"><?php get_timespan_most_viewed('post', 5, 30, true, true, 0)?></ul>
<ul class="allhot"><?php get_most_viewed('post', 5, 30, true, true, 0)?></ul>
</div>

CSS代码

.entry-foot{background-color:#FAFAFA;margin:5px 8px;padding:5px 10px;}
.entry-foot p span{background-color:#EFEFEF;border:1px solid
#CCCCCC;cursor:pointer;margin-right:6px;padding:2px 5px;}
.entry-foot p span.current{background-color:#FAFAFA; border-bottom-color:#fafafa;}
.entry-foot p{border-bottom:1px solid #CCCCCC;font-weight:bold;padding:0 10px 2px;}
.entry-foot li{border-bottom:1px dotted #CCCCCC;padding-bottom:3px;margin:5px 0;}
.entry-foot .mhot,.entry-foot.allhot{display:none;}

样式大家可以自己去设置，其中 .current 的样式就是鼠标移主去时 span 的样式了！

jQuery 代码

$(document).ready(function(){
$(".entry-foot span:first").addClass("current");  //为第一个span添加 .current 的样式，默认选中
$(".entry-foot ul:not(:first)").hide();  //ul 不是第一个时隐藏
$(".entry-foot span").mouseover(function(){  //鼠标移到 span 上时触发函数
$(".entry-foot span").removeClass("current");  //为第一个 span 移除 .current 样式
$(this).addClass("current");  //为触发的 span 添加样式
$(".entry-foot ul").hide();  //隐藏 ul
$("."+$(this).attr("id")).fadeIn("slow");  //这句是核心，class(.) 和触发 span 的ID 一致的 fadeIn(渐显)
});});

完了，怎么样，应该挺容易理解的吧！本文只是提供一个思路或是方法，具体的代码大家可以根据自己的实际情况来写。有问题请留言，我会尽量答复。

Posted in Web Tagged ,
Share with Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪ViVi 365Key网摘 天极网摘 和讯网摘 博拉网 POCO网摘 添加到饭否 QQ书签 Digbuzz我挖网

相关文章本月热门点击排行

  • N/A
Post a comment 2009/02/07 – 15:4918,210 Views
Post a comment | Trackback URL | RSS Comments 89 Comments
  1. 2009/02/12 at 00:58 | #51
    电影网站Notify

    效果不错……

  2. 2009/02/12 at 12:57 | #52
    AlexNotify

    终于知道你这里是这样做出来的。。。

  3. 2009/02/12 at 13:56 | #53
    aunsenNotify

    你这个疯子！

  4. 2009/02/12 at 14:49 | #54
    初见土豆网Notify

    真的很不错。

  5. 2009/02/12 at 14:54 | #55
    JorNotify

    不错不错，好玩好玩。我慢慢消化……

  6. 2009/02/12 at 22:12 | #56
    yadandimaoNotify

    你博客的人气越来越旺！

  7. 2009/02/12 at 23:06 | #57
    xiaorszNotify

    自己留一个言去睡觉了，明天还有很多事要做呢！！

  8. 2009/02/13 at 00:20 | #58
    kerbyNotify

    谢谢你的教程，我成功实现了，但是在ie7下面我的tab字体看起来发虚，请问这是什么原因呢？

  9. 2009/02/13 at 10:13 | #59
    xiaorszNotify

    @kerby 不客气！发虚？我看了下，在我这IE7 下看着挺正常的啊！不知道你那是什么样子的！！

  10. 2009/02/13 at 10:31 | #60
    johnzonNotify

    坐下来慢慢研究

  11. 2009/02/13 at 16:04 | #61
    kerbyNotify

    @xiaorsz

    你那里没有问题？我这里看着不清楚，不过在其它浏览器就没问题，而且用ie7看你的tab也很清楚，可能这个跟主题有关了

  12. 2009/02/13 at 16:26 | #62
    xiaorszNotify

    @kerby 是啊，我这里用 IE 看着也可以啊！！这就诡异了，呵呵 ！！

  13. 2009/02/13 at 18:49 | #63
    xiaorszNotify

    @johnzon 好久没见你影子了哈！！应该回学校了吧？

  14. 2009/02/13 at 19:47 | #64
    YoungCheonNotify

    赶紧写点别的 把最近解决的jquery的都写上

  15. 2009/02/14 at 00:07 | #65
    kerbyNotify

    完善一下@预览的教程吧，那个只能在inove主题下才能用，换了其他的就不行了，如何才能通用呢？

    xiaorsz，我来定制jquery教程了^_^

  16. 2009/02/14 at 09:43 | #66
    xiaorszNotify

    @kerby 那个不一定在 iNove 下才能用啊！！只要回复是 @name 的都可以实现的，和 iNove 其实没什么关系的！！不知道你用在哪里不行了？
    我最近也在折腾 jQuery 呢！！发现它太强大了！！呵呵！！

  17. 2009/02/14 at 19:42 | #67
    kerbyNotify

    @xiaorsz

    不是吧，你的@预览方法是在这里看的吗？http://philna.com/2008/12/mouseover-to-show-comment-no/

    代码是一模一样的嘛？？

    肖恩不是都说过这个要根据主题不同而做修改的吗？？

  18. 2009/02/14 at 21:12 | #68
    xiaorszNotify

    @kerby 基本上是一样的，修改也是针对自己的主题把那个 ID 和 class 换一下！！就是用正则表达式匹配 @name 然后再克隆显示了，能看懂再用的话就会很简单了！！你可以先试一下哈！！

  19. 2009/02/15 at 19:46 | #69
    CHEENotify

    效果真不错

  20. 2009/02/15 at 19:47 | #70
    CHEENotify

    提交评论之后，是怎么实现的这种渐变滑动的效果呢？

  21. 2009/02/15 at 21:20 | #71
    痞子CNotify

    @kerby 博主的也发虚，有可能ie hack定义的字体不同导致的吧。还得作者解释一下

  22. 2009/02/16 at 00:41 | #72
    痞子CNotify

    我用的Inove的主题
    我的问题处在了这：
    $(“.entry-foot span:first”) is null //firebug如是说
    于是我将$(“.entry-foot span:first”)改为和CSS里一样的$(“.entry-foot p span:first”)了，可是结果还是令人心痛：
    $(“.entry-foot p span:first”) is null
    jquery正常载入，剩下的代码完全copy你的，不知道为什么会出这个问题，这个选择器里应如何填才能正确显示呢？

  23. 2009/02/17 at 15:18 | #73
    笑话Notify

    谢谢你的提示哦·`·“~

  24. 2009/02/17 at 19:30 | #74
    xiaorszNotify

    @痞子C 这个选择器选择的就是 entry-foot 类中的第一个 span 啊！！能在对应的 html 中能找到就应该存在啊？不知道你是想在哪里实现的，我去看看什么情况！！

  25. 2009/02/17 at 19:31 | #75
    xiaorszNotify

    @痞子C 你的下面也发虚吗？

  26. 2009/02/20 at 13:27 | #76
    grubyleeNotify

    额，学习了，　以前用js都不会哦，还得学习学习

  27. 2009/02/20 at 16:02 | #77
    vagaaNotify

    仔细想下你的研究撒··~~`~

  28. 2009/02/22 at 15:22 | #78
    xiaoooleNotify

    这个东西很有用。学习了。

  29. 2009/02/23 at 02:01 | #79
    danielNotify

    说的很仔细呀！谢谢了！

  30. 2009/04/07 at 01:46 | #80
    wulinfoNotify

    有时间要弄一下

  31. 2009/04/30 at 15:41 | #81
    xhsNotify

    我没有用到wordpress,而是直接用HTML标签，但按照上面做出来并不完全成功

  32. 2009/04/30 at 19:46 | #82
    ChenShiAnNotify

    请教一下，jQuery 代码放在哪里，怎么处理？
    不懂这个，谢谢了。

  33. 2009/04/30 at 20:46 | #83
    xiaorszNotify

    @xhs 这个应该是一样的呀，这里只是动态调用内容罢了！！呵呵！！

  34. 2009/04/30 at 20:48 | #84
    xiaorszNotify

    @ChenShiAn 放到一个JS文件中，然后在页面中引用就行了！！还要引入 jQuery 框架！！可以到网上多搜索下，呵呵！！

  35. 2009/05/06 at 20:20 | #85
    boloNotify

    学习了，将来有用。

  36. 2009/06/04 at 12:32 | #86
    xxxxNotify

    学习了，将来有用。

  37. 2009/06/27 at 01:54 | #87
    路过Notify

    很不错，谢谢

  38. 2009/07/10 at 19:49 | #88
    SivanNotify

    试了一下，如果每个ul都是display:none那么最开始第一个ul不自己显示，当鼠标移上才显示。而且移开容易自己变没，我给改成click触发的了。
    第一个不显示给第一个ul加fadeIn也行，CSS里把第一个类从display:none里删了也行。

  39. 2010/02/05 at 01:13 | #89
    wtttkNotify

    很好很强大

Comment pages 1 2
2 Trackbacks
  1. By jQuery练手作品：Tab 切换效果 | 木木木木木 on 2009/12/08 at 21:31

    [...] 干掉侧边栏 jQuery练手作品：Tab 切换效果 啥是“Tab 切换效果”，这都不知道那肯定落伍了！其实实现这个有很多方法，随手一搜就是一大把。不过，既然已经加载了jQuery，那就物尽其用，参考了这篇文章《用 jQuery 实现灵活的 tab 切换效果》，也给小站整了个（见侧边栏）。 [...]

  2. By jQuery实现原文链接Tab 切换效果 | 伟景博客 on 2010/01/08 at 14:55

    [...] 啥是“Tab 切换效果”，这都不知道那肯定落伍了！其实实现这个有很多方法，随手一搜就是一大把。不过，既然已经加载了jQuery，那就物尽其用，参考了这篇文章《用 jQuery 实现灵活的 tab 切换效果》。 [...]

Post a Comment

（必填）

（必填，有回复时方便邮件通知）

（可不填，填了方便回访）

Sharing technology, recording life