好用的jQuery Tab切換插件 - Tabulous.js

Tabulous.js 是一個實作了Tab标簽切換功能的 jQuery 插件，輕量級插件，簡單且易于使用。它所生成的Tab标簽可通過 CSS 來自定義樣式，同時它也提供了多種切換效果。

如何使用

首先在頁面中加入 jQuery 架構和 Tabulous.js 插件

<link href='tabulous.css' rel='stylesheet' type='text/css'>
<script src="jquery.min.js"></script>
<script src="tabulous.js"></script>
           

然後添加Tab标簽的HTML結構，如

<div id="tabs">
    <ul>
        <li><a href="#tabs-1" target="_blank" rel="external nofollow"  title="">Tab 1</a></li>
        <li><a href="#tabs-2" target="_blank" rel="external nofollow"  title="">Tab 2</a></li>
    </ul>
    <div id="tabs_container">
        <div id="tabs-1">
        <!--内容内容-->
        </div>
        <div id="tabs-2">
        <!--内容内容-->
        </div>
    </div>
</div>
           

最後對其初始化即可

$('#tabs').tabulous({
    effect: 'scale'
});