Tabulous Usage Guide

Basic implementation.

$('#block_0').find('ul.tabs').tabulous();

Apply custom class names to active tab and active content block.

$('#block_1').find('ul.tabs').tabulous({
	tabClass: 't-active',
	contentClass: 'c-active'
});

Use a mouseover event instead of click event.

$('#block_2').find('ul.tabs').tabulous({
	event: 'mouseover'
});

Use with a callback function. The tab element, and content block element, are passed as arguments in the callback. You can return false to prevent the tab behavior from executing. Clicking the third tab below will redirect to the Google homepage.

$('#block_3').find('ul.tabs').tabulous({
	callback: function($tab, $content){
		if($content.is('#tab_3_c')){
			window.location = $content.text();
			return false;
		}
	}
});

Now for some advanced functionality. Load content via ajax by using the callback function. Also, by utilizing localStorage, we can save the last tab that was viewed by the user, and reload it when he/she returns to the page. We can also turn off the JavaScript check in this scenario since the content is loaded via ajax.

var lastTabIdx = 1;

// get the last tab that was viewed
if(localStorage) lastTabIdx = Number(localStorage.tab) || 1;

// fn which loads the content
function loadFile($content){
	var id = $content.attr('id'), file = '';

	// determine which file to load
	switch(id){
		case 'tab_4_a':
			file = '01';
			break;
		case 'tab_4_b':
			file = '02';
			break;
		case 'tab_4_c':
			file = '03';
			break;
	}
	
	// ajax load content
	$content.load('ajax/' + file + '.html');
}

// load the ajax content from previous session
loadFile(
	$('#block_4').find('div.content:nth-child(' + (lastTabIdx + 1) + ')')
);

// init tabulous
$('#block_4').find('ul.tabs').tabulous({
	index: lastTabIdx,
	checkJS: false,
	callback: function($tab, $content){
		// save the index of the last tab that was viewed
		if(localStorage) localStorage.tab = $tab.parent().index() + 1;
		
		// only load if content hasn't been loaded yet
		if(!$content.html()) loadFile($content);
	}
});

Because events are bound using event delegation, new tabs can be easily added dynamically without having to do any extra set up. Simply add a new tab using the button below and click it to view it's contents.

Be sure to check this page after disabling JavaScript. You will find all the content blocks visible (except the set dependent on ajax).