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

本文参考:http://site518.net/jquery-tabs-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" title="">Tab 1</a></li>
<li><a href="#tabs-2" 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'
});

相关推荐