大家先看看壹品集（只在文章页侧边栏上有）的tab切换效果，是不是觉得还不错，其实这只是一个简单的jQuery Tab切换效果，虽然很简单，但是却很实用。如果大家对此感兴趣，可以照着下面的方法折腾一番。
由于它是jQuery效果，所以首先一点，要确保你的WordPress主题加载了jQuery运行库。
关于加载jQuery库可以参考下面的方法，如果你的主题已经加载了jQuery库，那跳过吧！
一、在header.php的head标签中加载jQuery库（非加不可）：
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
当然，如果你觉得你的主机比GG更稳定更速度，那放本地也行的！
二、添加利用这个库让元素动起来的代码（可理解为命令代码）：
$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});上面这段就是一个让滑动按钮起作用的jQuery代码，那我们又该如何使用这个代码呢？有二个方法：
1.直接在header.php添加如下结构的代码：
<script type="text/javascript" >jQuery(document).ready(function($){ //注意要用这个把jQuery代码都包裹起来，不然里面的可都是无效的哦~ $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); $('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);}); //代码段二…… //代码段三……});</script>2.推荐把方法1说的代码另存为.js文件：
jQuery(document).ready(function($){ $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); $('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);}); });然后再在header.php的head标签中添加：
<script type="text/javascript" src="//xxxooo.com/xxxooo.js"></script>
注意把上面的XXOO换成你的网站的路径哦。
现在加载完了jQuery库，那继续来实现jQuery tab菜单切换效果。把下面代码放在你想要实现tab切换效果的地方，如：sidebar等位置：
一、HTML代码结构
<div id="sidebar-tab"> <div id="tab-title"> <h3><span class="selected">最新评论</span><span>近期热评</span><span>随机文章</span></h3> </div> <div id="tab-content"> <ul><?php wkc_recent_comments('number=10&length=25'); ?></ul> <ul class="hide"><?php wkc_most_commented_posts('number=10&days=300'); ?></ul> <ul class="hide"><?php wkc_random_posts('number=10&length=40'); ?></ul> </div></div>说明：#tab-title是标题，#tab-content是对应的内容（其中三个ul内的代码是WP Kit CN插件调用相应标题内容的）。如果你要显示4个内容，则在标题和内容分别添加一个span和ul即可！
二、CSS美化代码
#sidebar-tab{border:1px solid #ccf;margin-bottom:1.5em;overflow:hidden;}#tab-title h3{color:#666;font-size:15px;font-weight:400;}#tab-title .selected{color:#356aa0;border-bottom:0px;} /*标题被选中时的样式*/#tab-title span{padding:5px 9px 5px 10px;border:1px solid #ccf;border-right:0px;margin-left:-1px;cursor:pointer;}#tab-content .hide{display:none;} /*默认让第一块内容显示，其余隐藏*/#tab-content ul{padding:5px 10px;overflow:hidden;}#tab-content ul li{padding-top:5px;height:20px;}关于css，不同主题有不同处理方法，自己修改吧。
完成这步，效果是已经出来了，只是切换的这个功能还没有。那让我们一起有请强大利器出场！
三、jQuery控制代码
$('#tab-title span').mouseover(function(){ $(this).addClass("selected").siblings().removeClass(); $("#tab-content > ul").eq($('#tab-title span').index(this)).show().siblings().hide();});这是一段jQuery裸代码，关于怎么运用到文件中去，请看上面部分
稍微陈述下控制代码的运作过程：鼠标移到一个标题（#tab-title span）时，该标题添加被选中（.selected）的效果，其他标题移除被选中的效果；同时，获取标题被选择的序号（.eq()），让内容中对应的子项（#tab-content ul）显示，其余子项隐藏。
更改为点击标题切换，而且内容显示方式改用slideUp/slideDown。
$('#tab-title span').click(function(){ $(this).addClass("selected").siblings().removeClass(); $("#tab-content > ul").slideUp('1500').eq($('#tab-title span').index(this)).slideDown('1500');});壹品集现在就是用的这种效果。
