Как сделать простые табы в блоге на jQuery (часть 1)

Как сделать простые табы в блоге на jQuery (часть 1) | n-wp.ru

В своих проектах я все чаще стал использовать табы для вывода различной информации на одном и том же месте. За примером далеко ходить не нужно, достаточно посмотреть на комментарии этого поста – они разбиты на обычные комментарии и трекбэки, отображаемые в разных табах.

Как сделать простые табы в блоге на jQuery (часть 1)

Я нашел для себя два простых способа, с помощью которых можно внедрить табы в тему блога, при чем оба способа – чрезвычайно просты. Об одном из них сейчас и поведаю.

1. Для начала убедитесь, что в блоге подключена библиотека jQuery. Подключить её помогут два поста: Как подключить jQuery и Как загружать jQuery с сайта Google.

2. Откройте файл, в котором нужно сделать табы (например, single.php), и вставьте в него такой код:

 

 

 

 

 

Содержимое первого таба

 

Содержимое второго таба

 

Содержимое третьего таба

 

Как видите, это очень простая структура. Сначала идет список табов, потом – содержимое табов. Для элементов сразу заданы стили. Чтобы придать всему этому красивое, ненавязчивое оформление, нужно описать стили для всех этих элементов.

3. Откройте файл style.css и вставьте в него код, задающий оформление используемых нами элементов.

ul.tabs { margin: 0 0 0 20px; padding: 0; float: left; list-style: none; height: 32px; width: 100%; }
ul.tabs li { float: left; 	margin: 0; padding: 0; height: 31px; line-height: 31px; border: none; margin-bottom: -1px; overflow: hidden; position: relative; background: #fff;  }
ul.tabs li a { text-decoration: none; color: #aaa; display: block; font-size: 1.0em; padding: 0 10px; border-bottom:#fff 1px solid; }
ul.tabs li a:hover { background: #fff;color: #000; border-bottom:#fff 1px solid; }
html ul.tabs li.active { background: #fff; border-top-left-radius:5px; border-top-right-radius:5px; border-top: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #eee; color:#000; border-bottom: #fff 1px solid; }
.tab_container { overflow: hidden; clear: both; float: left; width: 100%; background: #fff; margin-bottom:0px; background:#fff; border-top:#eee 1px solid;}
.tab_content { padding:0; }
html ul.tabs li.active a, html ul.tabs li.active a:hover {color:#000;}

Я привел пример оформления для светлых блогов в белым фоном. Вы можете поиграть с этим оформлением, изменив его под дизайн своего блога. Ну и последний шаг – это подключение java-скриптов, чтобы совместить табы, оформление, и сделать красивое переключение между ними.

4. Откройте файл header.php и вставьте в него код скрипта:

$(document).ready(function() {

	//When page loads...
	$(".tab_content").hide(); 
	$("ul.tabs li:first").addClass("active").show(); 
	$(".tab_content:first").show(); 

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); 
		$(this).addClass("active"); 
		$(".tab_content").hide(); 

		var activeTab = $(this).find("a").attr("href"); 
		$(activeTab).fadeIn(); 
		return false;
	});

});

Этот скрипт переключает табы с затуханием, запоминает активный таб, при загрузке страницы делает активным первый таб. Вот в принципе и всё – пользуйтесь!

Автор tiaurus 2182 Articles
Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

8 Комментарии

  1. При нажатии на вкладку (один из табов) и затем просто перезагрузить страницу показываются сразу все вкладки. А в браузерной строке появляется ссылка вида сайт.ru/#tab2.
    Наверно это из-за запоминания активной вкладки. И как сделать чтоб он открывал первую при перезагрузке?

    • Это говорит о том, что у вас либо не прописанн скрипт java, либо не подключена библиотека jQuery, либо есть конфлик скриптов.

      • Либо это просто Денвер, т.к. уже полдня все нормально, я уже каждый час проверяю)), ладно думается что на хостинге нормально все будет.
        Скрипты не конфликтуют(проверено не на одном сайте), jQuery и java прописаны.

  2. По поводу моего комментария выше, надо чаще очищать Денвер.
    Если эти табы сделать в двух экземплярах на одной странице, то при нажатии на одну вкладку будут открываться вкладки у обоих экземпляров одновременно.

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*