Универсальные вкладки на jQuery

Посмотреть на работающий пример и скачать готовый код можно по ссылкам ниже:

Для того, что бы показать как можно больше вариантов исользования данного решения, зададим следующие условия:

• - должна быть возможность расположить на странице неограниченное количество блоков со вкладками;
• - должна быть возможность стилизовать каждый блок по разному;
• - каждый блок должен работать независимо от другого.

Приступим. HTML разметка для табов будет традиционная - ненумерованный список, содержащий ссылки-закладки и div контейнеры с контентом, в которых может содержаться любая информация. Что бы иметь возможность придать каждому блоку с закладками индивидуальный стиль, диву, выполняющему роль обертки для каждого блока, зададим разные классы. Первому пункту списка (элементу li) зададим класс active. Эта закладка будет являться активной по умолчанию при загрузке страницы. Код будет выглядеть так:

<div class="selectTabs_first"> // первый блок с вкладками
	<ul class="lineTabs">
		<li class="active"><a href="#">Вкладка с текстом</a></li>
		<li><a href="#">Вкладка с фото</a></li>
		<li><a href="#">Вкладка с фото и текстом</a></li>
	</ul>
	<div class="content">
		<div class="tab1">
			вкладка с текстом
		</div>
		<div class="tab2">
			вкладка с фото
		</div>
		<div class="tab3">
			вкладка с фото и текстом
		</div>
	</div>
</div>
<div class="selectTabs_second"> // второй блок с вкладками
	<ul class="lineTabs">
		<li class="active"><a href="#">Text</a></li>
		<li><a href="#">Photo</a></li>
		<li><a href="#">Text and Photo</a></li>
	</ul>
	<div class="content">
		<div class="tab1">
			вкладка с текстом
		</div>
		<div class="tab2">
			вкладка с фото
		</div>
		<div class="tab3">
			вкладка с фото и текстом
		</div>
	</div>
</div>

С разметкой, думаю, все предельно понятно. Для увеличения количества вкладок добавляем в список новые пункты с названиями вкладой и в блок content вставляем конструкцию с классом tab и порядковым номером (название класса можно изменить, но тогда нужно внести соответствующие правки в js).

Далее потребуется с помощью стилей спрятать все блоки кроме первого в контейнере content. Этот блок так же как и ссылка является активным по умолчанию:

.content div{
display:none;
}
.content .tab1 {
display:block;
}

Ну и последнее, что потребуется сделать, что бы конструкция заработала - подключить к странице следующий скрипт (либо в head, либо в отдельном файле):

$(document).ready(function(){
	$("div.selectTabs_first, div.selectTabs_second").each(function () {
		var tmp = $(this);
		$(tmp).find(".lineTabs li").each(function (i) {
			$(tmp).find(".lineTabs li:eq("+i+") a").click(function(){
				var tab_id=i+1;
				$(tmp).find(".lineTabs li").removeClass("active");
				$(this).parent().addClass("active");
				$(tmp).find(".content div").stop(false,false).hide();
				$(tmp).find(".tab"+tab_id).stop(false,false).show();
				return false;
			});
		});
	});
});

Во второй строке $("div.selectTabs_first, div.selectTabs_second").each(function () { требуется указать скрипту слассы, или id блоков, которые он должен обрабатывать (в html для каждого блока был указан свой класс selectTabs_first и selectTabs_second, что бы иметь возможность придать им разный внешний вид). Если по дизайну все блоки должны выглядеть одинаково, то им достаточно указать единый класс.

Теперь можно посмотреть, что получилось. Выглядят табы не красиво, но функции свои выполняют. Дальше с помощью каскадных таблиц стилей им можно придать абсолютно любой внешний вид.

Код протестирован в браузерах ИЕ 7-8-9, FireFox, Chrome, Safari.