美羊软件用乐观的生活,品味非凡人生。 |
|
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结构的适用性更强。