之前已发布过《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');
}); |