Default

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

This is the default tab functionality.

Tab 2

Tab 3

Hover

$('.tabs').tabslet({
	mouseevent: 'hover',
	attribute: 'href',
	animation: false
});

Tabs change on mouse over...

Tab 2

Tab 3

Animation

$('.tabs').tabslet({
	mouseevent: 'click',
	attribute: 'href',
	animation: true
});

Change the tab to see that there is an animation.

Tab 2

Tab 3

Rotation

$('.tabs').tabslet({
	autorotate: true,
	delay: 6000
});

It's alive!

It's alive!!

It's alive!!!

Custom Events

Custom event "_before"

$('.before_event').tabslet();
$('.before_event').on("_before", function() {
	// do stuff here
});

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
});

An alert message is coming after the animation...

TAB 2

TAB 3

Use of data attribute to load

The attribute "data-toggle"

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

TAB 2

TAB 3

适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

来源:站长素材