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

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

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

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

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

• Таб1

• Таб2

• Таб3

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

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;
	});

});

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