当前位置：首页 > 网页特效 > 导航菜单

兼容bootstrap的jQuery分页插件jquery.tabulation.js

分类：导航菜单日期：2024-05-14 点击(5) 评论(0)

简介

在页面中引入jquery和jquery.tabulation.js文件。

```html
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.tabulation.js"></script>    
```                             
#####  HTML结构
基本的HTML结构如下。

```html
<div class="js-tabulation" data-tabulation-id="first"> 
 
  
  <span data-tabulation-ref="first" data-tabulation-tab="1">Tab with index "1"</span>
  <span data-tabulation-ref="first" data-tabulation-tab="2">Tab with index "2"</span>
  <span data-tabulation-ref="first" data-tabulation-tab="3">Tab with index "3"</span>
 
  
  <span data-tabulation-ref="first" data-tabulation-nav="1">First</span>
  <span data-tabulation-ref="first" data-tabulation-nav="2">Second</span>
  <span data-tabulation-ref="first" data-tabulation-nav="3">Third</span>
 
</div>
```
#####  初始化插件
在页面DOM元素加载完毕之后，通过tabulation()方法来初始化插件。

```html
$('.js-tabulation').tabulation();
```
#####  配置参数
可用的配置参数有：

```html
$('.js-tabulation').tabulation({
  default: undefined, // Default tab to enable on startup
  nav: 'active', // Class for navigation if active
  tab: 'active', // Class for tab if active
  beforeSet: undefined, // Function before tab changed. Stops if return false
  afterSet: undefined // Function called after active tab changed
});
```
- default：默认显示的激活项。
- nav：分页导航上的激活class类。
- tab：tab上的激活class类。
- beforeSet：tab改变前的回调函数。
- afterSet：tab改变后的回调函数。

web299.com

兼容bootstrap的jQuery分页插件jquery.tabulation.js

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果