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>内容一</ul> <ul class="hide">内容二</ul> <ul class="hide">内容三</ul> </div> </div>
#tab-title是标题，#tab-content是对应的内容（其中三个ul内的代码是WP Kit CN插件调用相应标题内容的）。如果你要显示4个内容，则在标题和内容分别添加一个span和ul即可！
22
jQuery控制代码：鼠标滑过切换
$('#tab-title span').mouseover(function(){
$(this).addClass("selected").siblings().removeClass();
$("#tab-content > ul").eq($('#tab-title span').index(this)).show().siblings().hide();
});
稍微陈述下控制代码的运作过程：鼠标移到一个标题（#tab-title span）时，该标题添加被选中（.selected）的效果，其他标题移除被选中的效果；同时，获取标题被选择的序号（.eq()），让内容中对应的子项（#tab-content ul）显示，其余子项隐藏。
jQuery控制代码：鼠标点击切换
$('#tab-title span').click(function(){
$(this).addClass("selected").siblings().removeClass();
$("#tab-content > ul").slideUp('1500').eq($('#tab-title span').index(this)).slideDown('1500');
}); 更改为点击标题切换，而且内容显示方式改用slideUp/slideDown，此次是改进jQuery代码，使HTML结构的适用性更强。