jQuery之Tab切换代码改进

之前已发布过《jQuery练手作品：Tab 切换效果》，此次是改进jQuery代码，使HTML结构的适用性更强！

效果图上：

  

代码上：

一、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只是符合我正在使用的主题样式，各位童鞋加到自己主题时修改是免不了的，所以无一点CSS基础的童鞋还是暂时别折腾东东了哦。完成这步，效果是已经出来了，只是切换的这个功能还没有。那让我们一起有请强大利器出场！

三、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）显示，其余子项隐藏。

最后，回过头来说说改进再哪~最大最大的改进就是，方便了再次添加选项卡的内容！

2010年1月24日：更改为点击标题切换，而且内容显示方式改用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');
 
});

 以上内容转载自木木木木木jQuery之Tab切换代码改进