jqueryTabs选项卡

在 head 标签中引入 css 文件，放在 meta 标签之后即可：

<link rel="stylesheet" href="http://api.cas.cn/plugin/tab/1.0.1/css/tab.css" type="text/css" />

在模板文件尾部（body结束标签前）引入 jquery 库（如果模板中已经引入，则无需重复引入）和jqueryTabs选项卡 js，确保 jquery.tab.js 放在 jquery 库的后面：

<script type="text/javascript" src="http://api.cas.cn/lib/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://api.cas.cn/plugin/tab/1.0.1/js/jquery.tab.js"></script>

在页面中写好选项卡 html，请不要改变代码结构，其中内容可以不是 ul，可根据实际情况编写，但是选项卡 a 标签的 href 值要和相应内容标签的 id 值一一对应。

<div id="example-one">

	<ul class="nav">

		<li class="nav-one"><a href="#featured" class="current">Featured</a></li>

		<li class="nav-two"><a href="#core">Core</a></li>

		<li class="nav-three"><a href="#jquerytuts">jQuery</a></li>

		<li class="nav-four last"><a href="#classics">Classics</a></li>

	</ul>

	<div class="list-wrap">

		<ul id="featured" class="list-wrap-con">

				<li><a href="http://www.jq22.com/" target="_blank">Full Page Background Images</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">Designing for WordPress</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">Build Your Own Social Home!</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">Absolute Positioning Inside Relative Positioning</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">IE CSS Bugs That'll Get You Every Time</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">404 Best Practices</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">Date Display with Sprites</a></li>

			</ul>

			<ul id="core" class="tab-hide list-wrap-con">

				<li><a href="http://www.jq22.com/" target="_blank">The VERY Basics of HTML &amp; CSS</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">Classes and IDs</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">The CSS Box Model</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">All About Floats</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">CSS Overflow Property</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">CSS Font Size - (px - em - % - pt - keyword)</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">CSS Transparency / Opacity</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">CSS Sprites</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">CSS Image Replacement</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">CSS Vertial Align</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">The CSS Overflow Property</a></li>

			</ul>

			<ul id="jquerytuts" class="tab-hide list-wrap-con">

				<li><a href="http://www.jq22.com/" target="_blank">Anything Slider jQuery Plugin</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">Moving Boxes</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">Simple jQuery Dropdowns</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">Featured Content Slider</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">Start/Stop Slider</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">Banner Code Displayer Thing</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">Highlight Certain Number of Characters</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">Auto-Moving Parallax Background</a></li>

			</ul>

			<ul id="classics" class="tab-hide list-wrap-con">

				<li><a href="http://www.jq22.com/" target="_blank">Top Designers CSS Wishlist</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">What Beautiful HTML Code Looks Like</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">Easily Password Protect a Website or Subdirectory</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">IE-Only Stylesheets</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">eCommerce Considerations</a></li>

				<li><a href="http://www.jq22.com/" target="_blank">PHP: Build Your First CMS</a></li>

			</ul>

	</div>

</div>

在模板的 body 结束标签前，刚才引入的jqueryTabs选项卡 js 后，插入以下 js：

<script type="text/javascript">
$(function() {
	$("#example-one").organicTabs({ //容器 id
		"speed": 100 //默认300，选项卡切换的速度，单位是毫秒
	});
});
</script>

如果使用默认设置，可以省略相应参数：

<script type="text/javascript">
$(function(){
	$("#example-one").organicTabs();
});
</script>