北极寒流 » 网络资源 » WordPress之超酷Tab切换代码 - 2010.08.16

WordPress之超酷Tab切换代码

大家先看看壹品集(只在文章页侧边栏上有)的tab切换效果,是不是觉得还不错,其实这只是一个简单的jQuery Tab切换效果,虽然很简单,但是却很实用。如果大家对此感兴趣,可以照着下面的方法折腾一番。

由于它是jQuery效果,所以首先一点,要确保你的WordPress主题加载了jQuery运行库。

关于加载jQuery库可以参考下面的方法,如果你的主题已经加载了jQuery库,那跳过吧!

一、在header.php的head标签中加载jQuery库(非加不可):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

当然,如果你觉得你的主机比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添加如下结构的代码:

<script type="text/javascript" >
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);}); 
  //代码段二……
  //代码段三……
});
</script>

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标签中添加:

<script type="text/javascript" src="http://xxxooo.com/xxxooo.js"></script>

注意把上面的XXOO换成你的网站的路径哦。

现在加载完了jQuery库,那继续来实现jQuery tab菜单切换效果。把下面代码放在你想要实现tab切换效果的地方,如:sidebar等位置:

一、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,不同主题有不同处理方法,自己修改吧。

完成这步,效果是已经出来了,只是切换的这个功能还没有。那让我们一起有请强大利器出场!

三、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');
});

壹品集现在就是用的这种效果。

资料来源:http://immmmm.com/jquery-tab-switch-code-improved.html