[代码样式]jQuery Tab选项卡插件tabulous.js

简介

tabulous.js 是一个简单小巧的 jQuery Tab 选项卡插件，它没有太多花哨的东西，主要特点是使用了 CSS3 的过度效果，它提供 4 种过度效果，分别是 scale、slideLeft、scaleUp 和 flip。

兼容

浏览器兼容：兼容 IE8 及以上版本和其他主流浏览器，由于 IE8 和 IE9 不支持 CSS3 过度效果，所以没有效果，但能正常使用。

jQuery 兼容：兼容 1.7 及以上版本。

使用方法

1、引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/tabulous.css" rel="external nofollow" >
<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/tabulous.js"></script>

2、HTML

<div class="tabs">
<ul>
<li><a href="#tabs-1" rel="external nofollow" >Tab 1</a></li>
<li><a href="#tabs-2" rel="external nofollow" >Tab 2</a></li>
<li><a href="#tabs-3" rel="external nofollow" >Tab 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<p><a href="https://www.dowebok.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >内容1</a></p>
</div>
<div id="tabs-2">
<p><a href="https://www.dowebok.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >内容2</a></p>
</div>
<div id="tabs-3">
<p><a href="https://www.dowebok.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >内容3</a></p>
</div>
</div>
</div>

注意：id=”tabs_container” 是必须的，不能缺省或更改，因为 tabulous.js 需要找到这个对象，如果一个页面中有多 Tab 选项卡，那么都要加上。这就导致了 id 重复，在某些情况下会带来一定的麻烦。

3、JavaScript

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

配置

tabulous.js 只有 1 个参数 —— effect，即定义过度效果。

tabulous.js 主页：//git.aaronlumsden.com/tabulous.js/

github 地址：https://github.com/aarondo/tabulous.js

百度网盘" name="jQuery Tab选项卡插件tabulous.js" pass="" code=""]