以前看见别人博客单篇日志下面有“相关日志”、“随机日志”、“最热排行”之类的Tabs选项卡切换效果，也总想给自己的博客添加一个这样的切换功能。无奈凭咱这半吊子技术，什么JS、CSS都不怎么精通的人，也只能看着人家的博客流口水了！我请教了好几个WordPress博客界的精英牛人，无奈没有人愿意详细教我怎么做，最后只告诉我用了JS调用！这就像武林秘笈，对于高手一看就可以领悟，对于我呢，那就是雾里看花水中望月不知所以然！唉，谁让咱是菜鸟一只呢

      如果你和我一样想为你的博客添加Tabs切换效果，却苦于没有人教的话，那么赶快来看看这个教程吧

（一）、准备阶段

      Tabs选项卡切换效果其实可以用很多技术来实现，比如JavaScript+CSS、单纯用CSS、Ajax或是jQuery等等，今天我们就尝试使用JS+CSS来实现这一功能。其中JS文件是用来实现切换功能，CSS文件是用来实现样式的控制，以更好地契合你的主题。因此我们就需要这样的两个文件：

• tabs.js
• tabs.css

我提供我现在使用的这两个文件，以供大家参考学习。 下载

（二）、JS文件详细解读

将上面的文件下载后，用编辑器打开tabs.js文件，请根据你的需要进行修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//为你的Tab链接设置ID名称 (不包括末尾数字 //参考php页面的调用代码即可明白)
var tablink_idname = new Array("tablink")
//设置Tab控制区域的ID名字 (不包括末尾数字 //参考php页面的调用代码即可明白)
var tabcontent_idname = new Array("tabcontent") 
//设置Tab的数量
var tabcount = new Array("3")
//设置载入效果时从哪个Tab开始 (例如：设置为"2"，即载入时首先显示的是你的第二个选项卡内容)
var loadtabs = new Array("1")  
//设置选项卡是否自动切换(可选参数为"0" or "1" //如果你不想让选项卡自动切换请设置为"0")
var autochangemenu = 1;
//设置选项卡自动切换的时间间隔，单位：秒
var changespeed = 3;
//should the autochange stop if the user hover over a tab from the autochangemenu?当鼠标停留在选项卡上时是否继续自动切换？ 0=no 1=yes
var stoponhover = 1;
//设置参数结束
 
/*Tabs 函数 - 一般不需要修改这里*/
function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0))  {counter=0;}menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className='tab'+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = 'none';}document.getElementById(tablink_idname[menunr]+active).className='tab'+active+' tabactive';document.getElementById(tabcontent_idname[menunr]+active).style.display = 'block';}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;}
 
window.onload=function(){
var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]);  a++; b++;}while (b<=menucount);
if (autochangemenu!=0){start_autochange();}
}

（三）、调用实例

1. 在你的主题目录下创建tabs文件夹，并将tabs.css、tabs.js文件上传至该文件夹
2. 在你的主题目录，找到head.php文件并打开，在和之间加入以下代码：

   1 2 3 4

   <!-- CSS&JS文件调用 --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/tabs/easytabs.css" type="text/css" media="screen" /> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/tabs/easytabs.js"></script> <!-- CSS&JS文件调用end -->

3. 在你要添加Tabs选项卡切换效果的地方，比如single.php中添加调用代码（因为我使用的是WordPress Related Posts 和 WP-PostViews Plus这两个插件，故调用代码以这两个插件的相关参数为例）

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

   <!-- posts info tabs --> <div class="otherinfo"> <div class="tabmenu"> <ul> <li> <a href="#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');" onclick="return false;" title="" id="tablink1">相关日志</a> </li>   <li> <a href="#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');" onclick="return false;" title="" id="tablink2">本月排行</a> </li>   <li> <a href="#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');" onclick="return false;" title="" id="tablink3">所有排行</a> </li> </ul> </div> <!--End of the Tabmenu1 -->   <!--Start Tabcontent 1 --> <div id="tabcontent1"> <?php wp23_related_posts(); ?> </div> <!--End Tabcontent 1-->   <!--Start Tabcontent 2--> <div id="tabcontent2"> <ul> <?php get_timespan_most_viewed('post', 10, 30, true, true, 0); ?> </ul> </div> <!--End Tabcontent 2 -->   <!--Start Tabcontent 3--> <div id="tabcontent3"> <ul> <?php get_most_viewed('post', 10, 0 , true , true); ?> </ul> </div> <!--End Tabcontent 3--> </div> <div class="fixed"></div> <!-- posts info tabs end -->

OK！现在刷新你的页面，看看是不是一个漂亮的Tabs选项卡就出现在你的眼前 通过应用Tabs自动切换效果，我们成功地解决了为你的博客轻松添加Tabs选项卡切换效果（一）中关于信息最大化的问题!

如果你想实现通过一个JS文件实现整个博客多个不同类型Tabs选项卡多处的调用,那么请继续关注《为你的博客轻松添加Tabs选项卡切换效果》系列文章，如果你有什么问题和好的建议，欢迎你留言告诉我！

声明：城市@后版权所有,未经授权请勿转载本博客日志到任何博客或论坛！

如果你喜欢我的文章，欢迎订阅。Google Reader | 鲜果 | 抓虾 | 九点 | QQ邮箱 | 有道 | 更多