使用JQuery在WordPress实现Tabs效果
使用Tabs的好处是，能在有限的空间里显示更多的资讯。因而其应用也越来越广泛，而在WordPress中最常用在侧栏（Sidebar）。本篇将讨论如何使用jQuery实现Tabs效果，本文基于Justin Tadlock的教学撰写，英文原文请看这里。
1. 将jQuery加入到WordPress
首先我们要把jQuery加入到WordPress，WordPress本身就带有jQuery（在wp-includes\js里面），你可以用以下的程式将其加入，这句程式要放在<head>与</head>之间，通常是在你的主题的header.php文件：
<?php wp_enqueue_script('jquery'); ?>
当然你也可以使用你自己下载的jQuery，通常会将下载回来的jQuery会放在主题文件夹的js文件夹里面，你可以用以下这句程式：
<script type="text/javascript" src="< ?php echo bloginfo(stylesheet_directory) .'/js/jquery.js'; ? >">< /script >
另外，我们自己写的JavaScript会放在一个tabs.js文件里，请自行创建，这个文件同样放在主题的js文件夹里，我们要把这个文件也加入，请在上面那句的下一行加入：
<script type="text/javascript" src="< ?php echo bloginfo(stylesheet_directory) .'/js/tabs.js'; ? >">< /script>
2. Tabs的HTML程式码
现在可以关闭header.php，再打开主题文件sidebar.php，我们要加入Tabs的HTML，在你想要显示Tabs的位置加入：
<div class="tabbed">
<!-- The tabs -->
<ul class="tabs">
<li class="t1"><a class="t1 tab" title="<?php _e('Tab 1'); ?>"></a></li>
<li class="t2"><a class="t2 tab" title="<?php _e('Tab 2'); ?>"></a></li>
<li class="t3"><a class="t3 tab" title="<?php _e('Tab 3'); ?>"></a></li>
<li class="t4"><a class="t4 tab" title="<?php _e('Tab 4'); ?>"></a></li>
</ul>
<!-- tab 1 -->
<div class="t1">
<!-- Put what you want in here. For the sake of this tutorial, we'll make a list. -->
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
<!-- tab 2 -->
<div class="t2">
<!-- Or, we could put a paragraph -->
This is a paragraph about the jQuery tabs tutorial.</div>
<!-- tab 3 -->
<div class="t3">
<!-- Or, we could add a div -->
<div>Something needs to go in here!</div>
</div>
<!-- tab 4 -->
<div class="t4">
<!-- Why not put a few images in here? -->
< img src="image.gif" alt="Sample" />
< img src="image.gif" alt="Sample" />
< img src="image.gif" alt="Sample" /></div>
</div>
<!-- tabbed -->
这里设计了四个Tabs，只用了简单的HTML跟一点PHP，我就不多说了。
3. Tabs的jQuery主程式
我们先看这次的JavaScript，这是在tabs.js文件中的程式：
//part I
$(document).ready(function() {
$('div.tabbed div').hide();
$('div.t1').show();
$('div.tabbed ul.tabs li.t1 a').addClass('tab-current');
// part II
$('div.tabbed ul li a').click(function(){
var thisClass = this.className.slice(0,2);
$('div.tabbed div').hide();
$('div.' + thisClass).show();
$('div.tabbed ul.tabs li a').removeClass('tab-current');
$(this).addClass('tab-current');
});
});
Part I：一共有三句，在网页载入后马上运行：$(document).ready。
- 第一句是将所有的Tab内容（div）隐藏（hide）；
- 第二句是显示第一个Tab内容（div.t1）；
- 第三句是给第一个Tab的连结（li.t1 a）加入（tab-current），也就是标明这是当前显示的Tab。
Part II：是当Tab连结被点击时运行的程式：$(‘div.tabbed ul li a’).click。一共有五句：
- 第一句是取得当前连结的前两个class，以t1为例，thisClass就是”t1 tab”；
- 第二句是再次隐藏全部Tab内容（div）；
- 第三句是显示当前连结相应的Tab的内容（div）；
- 第四句是移除所有连结的tab-current属性。
- 第五句是为当前连结加入tab-current属性。
整个程式运作过程时，一开始先将所有的Tab的div隐藏，再显示第一个Tab的div，并将第一个Tab的连结设为当前Tab（tab-current）；当有其他Tab连结被点击时，再次将所有Tab的div隐藏，然后显示被点击连结所对应的div，还要移除所有连结的tab-current属性，最后给被点击的连结加入tab-current属性。
4. Tab的CSS样式
最后的CSS设计可以说是很主观的部分，你可以根据自己的喜好进行修改，所以这里只给出基本的CSS，也不详细说明了。
/* Contains the entire tabbed section */
.tabbed {
}
/* List of tabs */.tabbed ul.tabs {
float: left;
display: inline;
width: 100%;
margin: 0;
padding: 0;
}
.tabbed ul.tabs li {
list-style: none;
float: left;
margin: 0;
padding: 0;
}
.tabbed ul.tabs li a {
overflow: hidden;
display: block;
margin: 0 2px 0 0;
padding: 10px 12px;
}
.tabbed ul.tabs li a:hover {
}
/* The current selected tab */
.tabbed ul.tabs li a.tab-current {
}
/* The content shown when a tab is selected */
.tabbed div {
float: left;
display: block;
width: 100%;
}
/* Set the CSS to make sure the other tabs' content isn't shown other than the first */
.tabbed div.t2, .tabbed div.t3, .tabbed div.t4 {
display: none;
}
/* Content for inside your tabs' divs */
.tabbed div ul {
}
.tabbed div p {
}
.tabbed div div {
}
