大家先看看壹品集(只在文章页侧边栏上有)的tab切换效果,是不是觉得还不错,其实这只是一个简单的jQuery Tab切换效果,虽然很简单,但是却很实用。如果大家对此感兴趣,可以照着下面的方法折腾一番。
由于它是jQuery效果,所以首先一点,要确保你的WordPress主题加载了jQuery运行库。
关于加载jQuery库可以参考下面的方法,如果你的主题已经加载了jQuery库,那跳过吧!
一、在header.php的head标签中加载jQuery库(非加不可):
当然,如果你觉得你的主机比GG更稳定更速度,那放本地也行的!
二、添加利用这个库让元素动起来的代码(可理解为命令代码):
$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});
上面这段就是一个让滑动按钮起作用的jQuery代码,那我们又该如何使用这个代码呢?有二个方法:
1.直接在header.php添加如下结构的代码:
jQuery(document).ready(function($){ //注意要用这个把jQuery代码都包裹起来,不然里面的可都是无效的哦~
$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});
//代码段二……
//代码段三……
});
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标签中添加:
注意把上面的XXOO换成你的网站的路径哦。
现在加载完了jQuery库,那继续来实现jQuery tab菜单切换效果。把下面代码放在你想要实现tab切换效果的地方,如:sidebar等位置:
一、HTML代码结构
说明:#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,不同主题有不同处理方法,自己修改吧。
完成这步,效果是已经出来了,只是切换的这个功能还没有。那让我们一起有请强大利器出场!
三、jQuery控制代码
$('#tab-title span').mouseover(function(){
$(this).addClass("selected").siblings().removeClass();
$("#tab-content > ul").eq($('#tab-title span').index(this)).show().siblings().hide();
});
这是一段jQuery裸代码,关于怎么运用到文件中去,请看上面部分
稍微陈述下控制代码的运作过程:鼠标移到一个标题(#tab-title span)时,该标题添加被选中(.selected)的效果,其他标题移除被选中的效果;同时,获取标题被选择的序号(.eq()),让内容中对应的子项(#tab-content ul)显示,其余子项隐藏。
更改为点击标题切换,而且内容显示方式改用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');
});