大家先看看壹品集（只在文章頁側(cè)邊欄上有）的tab切換效果，是不是覺得還不錯(cuò)，其實(shí)這只是一個(gè)簡單的jQuery Tab切換效果，雖然很簡單，但是卻很實(shí)用。如果大家對此感興趣，可以照著下面的方法折騰一番。
由于它是jQuery效果，所以首先一點(diǎn)，要確保你的WordPress主題加載了jQuery運(yùn)行庫。
關(guān)于加載jQuery庫可以參考下面的方法，如果你的主題已經(jīng)加載了jQuery庫，那跳過吧！
一、在header.php的head標(biāo)簽中加載jQuery庫（非加不可）：
<script type="text/javascript" src="http://ajax./ajax/libs/jquery/1.2.3/jquery.min.js"></script>
當(dāng)然，如果你覺得你的主機(jī)比GG更穩(wěn)定更速度，那放本地也行的！
二、添加利用這個(gè)庫讓元素動(dòng)起來的代碼（可理解為命令代碼）：
$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});上面這段就是一個(gè)讓滑動(dòng)按鈕起作用的jQuery代碼，那我們又該如何使用這個(gè)代碼呢？有二個(gè)方法：
1.直接在header.php添加如下結(jié)構(gòu)的代碼：
<script type="text/javascript" >
jQuery(document).ready(function($){ //注意要用這個(gè)把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標(biāo)簽中添加：
<script type="text/javascript" src="http:///xxxooo.js"></script>
注意把上面的XXOO換成你的網(wǎng)站的路徑哦。
現(xiàn)在加載完了jQuery庫，那繼續(xù)來實(shí)現(xiàn)jQuery tab菜單切換效果。把下面代碼放在你想要實(shí)現(xiàn)tab切換效果的地方，如：sidebar等位置：
一、HTML代碼結(jié)構(gòu)
<div id="sidebar-tab">
<div id="tab-title">
<h3><span class="selected">最新評論</span><span>近期熱評</span><span>隨機(jī)文章</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是標(biāo)題，#tab-content是對應(yīng)的內(nèi)容（其中三個(gè)ul內(nèi)的代碼是WP Kit CN插件調(diào)用相應(yīng)標(biāo)題內(nèi)容的）。如果你要顯示4個(gè)內(nèi)容，則在標(biāo)題和內(nèi)容分別添加一個(gè)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;} /*標(biāo)題被選中時(shí)的樣式*/
#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;} /*默認(rèn)讓第一塊內(nèi)容顯示，其余隱藏*/
#tab-content ul{padding:5px 10px;overflow:hidden;}
#tab-content ul li{padding-top:5px;height:20px;}關(guān)于css，不同主題有不同處理方法，自己修改吧。
完成這步，效果是已經(jīng)出來了，只是切換的這個(gè)功能還沒有。那讓我們一起有請強(qiáng)大利器出場！
三、jQuery控制代碼
$('#tab-title span').mouseover(function(){
$(this).addClass("selected").siblings().removeClass();
$("#tab-content > ul").eq($('#tab-title span').index(this)).show().siblings().hide();
});這是一段jQuery裸代碼，關(guān)于怎么運(yùn)用到文件中去，請看上面部分
稍微陳述下控制代碼的運(yùn)作過程：鼠標(biāo)移到一個(gè)標(biāo)題（#tab-title span）時(shí)，該標(biāo)題添加被選中（.selected）的效果，其他標(biāo)題移除被選中的效果；同時(shí)，獲取標(biāo)題被選擇的序號（.eq()），讓內(nèi)容中對應(yīng)的子項(xiàng)（#tab-content ul）顯示，其余子項(xiàng)隱藏。
更改為點(diǎn)擊標(biāo)題切換，而且內(nèi)容顯示方式改用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');
});壹品集現(xiàn)在就是用的這種效果。
