en / ru

Табы

Представление контента в виде табов - случай частый.
Конечно, приведенная реализация не универсальная, но достаточна типична по структуре/фукционалу и может быть свободно использована при необходимости.

Скрипт создания табов:
(function($){
$.fn.uTabs = function(options) {
	var settings = $.extend({
			contentWrap: '.tabs-cont',
			action: 'click',
			start: 0,
			cclass: 'active'
		}, options),
		aClass = settings.cclass;
	return this.each(function() {

		$(this).each(function(){
			var activeTab,
				$content = $(this).next(settings.contentWrap),
				$tabs = $(this),
				openTab = function (name) {
					$tabs.find('.'+name).closest('li').addClass(aClass).siblings().removeClass(aClass);
					$content.find('.'+name).show().siblings().hide();
				};
			if($tabs.find('.'+aClass).length){
				activeTab = $tabs.find('.'+aClass+' a').attr('class');
			} else {
				activeTab = $tabs.find('li:eq('+settings.start+') a').attr('class');
			}
			openTab(activeTab);
			$tabs.find('a').bind(settings.action, function(){
				openTab(this.className);
				return false
			});
		});

});
};
})(jQuery);
Инициализация:
$(function(){
	$('.tabs').uTabs();
});
Инициализация с особыми настройками:
$(function(){
	$('.tabs').uTabs({
		contentWrap: '.myContent',
		start: 2,
		cclass: 'active'
	});
});
Пример HTML кода:

Tab content 1
Tab content 2
Tab content 3
Особенности:
  • Связь закладки и содержимого по одинаковому классу. Часто можно встретить взять по href таба -> id содержимого, но тем не менее даже при таком подходе обычно не реализуется полный потенциал использования хэша (#), потому разница непринципиальна.
  • Обертка содержимого идет сразу за оберткой табов. Чаще всего так и бывает в реальной верстке. К тому же такой подход позволяет использовать одинаковые классы для разных наборов табов и они будут действовать корректно, не посягая на чужую территорию.
  • Первоначально открытый таб задается в настройках при инициализации (параметр start, начинается с 0), либо довешенным классом 'active' (по умолчанию, либо заданный при инициализации в параметре cclass) на <li>. В противном случае активный будет первый таб.
Демо

Альтернатива: слайдер-табы

Как альтернативу простым табам советую посмотреть другой мой пример, о дополнительных формах ввиде слайдера. Именно он мне однажды помог, когда нужны были табы. Сделать ввиде табов достаточно просто, а выглядит намного интереснее.