html选项卡插件,基于jQuery实现Tabslet选项卡插件

特效描述：基于jQuery实现 Tabslet 选项卡插件。基于jQuery实现Tabslet选项卡插件

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

Default

$('.tabs').tabslet();

• information
• tab
• tab

This is the default tab functionality.

Tab 2

Tab 3

Hover

$('.tabs').tabslet({

mouseevent: 'hover',

attribute: 'href',

animation: false

});

• information
• tab
• tab

Tabs change on mouse over...

Tab 2

Tab 3

Animation

$('.tabs').tabslet({

mouseevent: 'click',

attribute: 'href',

animation: true

});

• information
• tab
• tab

Change the tab to see that there is an animation.

Tab 2

Tab 3

Rotation

$('.tabs').tabslet({

autorotate: true,

delay: 6000

});

• information
• tab
• tab

It's alive!

It's alive!!

It's alive!!!

Controls

$('.tabs').tabslet({

controls: {

prev: '.prev',

next: '.next'

}

});

previous

next

• information
• tab
• tab

Tab 1

Tab 2

Tab 3

Custom Events

Custom event "_before"

$('.before_event').tabslet();

$('.before_event').on("_before", function() {

// do stuff here

});

• information
• tab
• tab

An alert message before the tab change...

TAB 2

TAB 3

Custom event "_after"

$('.after_event').tabslet({

animation: true

});

$('.after_event').on("_after", function() {

// do stuff here

});

• information
• tab
• tab

An alert message is coming after the animation...

TAB 2

TAB 3

Use of data attribute to load

The attribute "data-toggle"

• information
• tab
• tab

Just include the plugin and add the data attribute to your html tag!

TAB 2

TAB 3