SiteIS

jQuery - безграничные возможности в дизайне Вашего сайта!

- Один из самых популярных на сегодня среди веб разработчиков фреймворк

- Позволяет быстро и легко создать потрясающие веб-приложения

- Удивительно красивые анимационные эффекты

- Улучшение пользовательского интерфейса

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

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

Скачать готовый код Посмотреть Demo

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

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

Приступим. 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.

Автор: Super User

Комментарии  

 
-1 # Кирилл 23.11.2012 13:49
У меня ИЕ-9 и вкладки не работают, заходил на ссылку вашего демо тоже не работает в ИЕ.
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Admin 23.11.2012 14:04
Цитирую Кирилл:
У меня ИЕ-9 и вкладки не работают, заходил на ссылку вашего демо тоже не работает в ИЕ.

Экий странный у вас ИЕ :-)
Ну а если серьезно, то у вас скорее всего в браузере заблокирован js - покрайней мере других причин мне в голову не приходит.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Кирилл 23.11.2012 14:13
пишет что ошибка console.log($ (tmp).find(".li neTabs li"));
в этой строчке.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Admin 23.11.2012 14:38
Цитирую Кирилл:
пишет что ошибка console.log($(tmp).find(".lineTabs li"));
в этой строчке.

К сожалению, на данный момент, у меня нет ответа на ваш вопрос. Проверил еще раз демо страницу у себя - никаких нареканий. Все отлично отрабатывает во всех ИЕ до 7 версии включительно.
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Кирилл 23.11.2012 14:25
А по поводу блокировки JS на браузерах, не можут же быть на разных компьютерах он заблокирован. Работает везде кроме IE
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # Станислав 13.07.2013 09:45
Отлично, отлично. Правда с IE есть такая проблема про console.log($ (tmp).find(".li neTabs li"));
Но меня интересует другое, подскажите индексируется ли поисковыми системами текст расположенный во вкладках, даже хотя бы впервой? Поставил себе на интернет магазин, боюсь описание не будет индексироваться . Плохо в этом понимаю, поэтому спрашиваю.
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # admin 14.07.2013 01:02
Да, вкладки прекрасно индексируются как google, так и Яндексом.
Ответить | Ответить с цитатой | Цитировать
 
 
-1 # Игорь 05.05.2014 17:50
Пропустил одну точку... Искал полчаса :D :lol: :D
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Павел 21.01.2015 22:30
Подскажите а в cms можно внедрить каким то образом... вот тут есть что то похожее моремаек.рф/127 8i.Zhenskaya_fu tbolka_Minony.h tm хочу так же не знаю как
Ответить | Ответить с цитатой | Цитировать