用 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 来调用相关文章和热门文章的。于是，我是代码是这样的：

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(渐显)
});});

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