用 jQuery 实现灵活的 tab 切换效果zz
原文链接：http://www.xiaorsz.com/jquery-realize-tab-switch-effect/
Tab 切换效果现在网上到处都是，特别是一些大型的门户，为了在有限的空间内呈现更多的内容，往往都采取了这种方式。腾讯的迷你首页就非常的典型。我以前用的 wordpresss 皮肤 iNove 中，其实也有这样的效果，就在 Trackbacks 和 Comments 的切换处，就是一个简单的应用。
寒假期间也给自己的博客搞了个，是用的 jQuery 实现的，实现的代码是从网上收集来的，自己感觉是非常不错的代码，非常简单，但不失灵活，而且很好的做到了表现和行为的分离。现在就跟大家分享一下，建议已经引入 jQuery 框架的同志们使用，如果因为这么几行代码而专门引入 jQuery ，感觉有点太夸张了，其实这样的 JS 代码网上多的是，随便 google 一下就 N 多了！！
效果预览
实例见文章的结尾处相关文章的部分。
实现思路
大家看源代码就应该能看到了，我这里三部分内容其实在页面加载的时候都加载了，只是只显示了一块，另外的两块隐藏。然后用 JS 和 CSS 来对鼠标动作进行响应，来达到所想来的效果。这个是 tab 切换效果的基本思路。当然同一些大型门户不同，他们的 tab 都实现了异步传输，即在页面加载的时候并不会加载，而是在需要的时候才从服务器进行传输并显示，这样在技术上显然会比较复杂，对于小网站来说，的确没多少 必要！！
具体代码
这里只展示下我用到的代码并进行一些解释，大家可根据实现情况进行修改。
首先看 HTML
<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 来调用相关文章和热门文章的。于是，我是代码是这样的：
<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 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 代码
$(“.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(渐显)
});});
完了，怎么样，应该挺容易理解的吧！本文只是提供一个思路或是方法，具体的代码大家可以根据自己的实际情况来写。有问题请留言，我会尽量答复。
赞助商
相关文章
相关文章
5 条评论 !
-
做tab用纯js就好了
-
是啊，我现在就是用的纯js做tab，不过jquery还是太强大了。
-
呵呵。还行
-
你这里比我那里热闹啊。哈哈哈
-
还可以。
