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

Продолжаю тему создания простых табов в блоге, не требующих глубоких знаний PHP и Java. Первый способ, который я описывал недавно, был основан на списках, в которых табами служили специальные ссылки. Эти ссылки показывали содержимое табов, оформленное особым образом и активируемое с помощью скрипта. Второй способ, который я хочу рассмотреть, попроще – нет эффектов во время смены содержимого табов, но и нет лишних внутренних ссылок для активации табов. Именно этот способ я использовал в блоге 123-box.ru.

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

			<dl class="tabs">
				<dt class="selected">Таб1</dt>
				<dd class="selected">
					<div class="tab-content">содержимое первого таба</div>
				</dd>																
				<dt>Таб2</dt>
				<dd>
					<div class="tab-content">содержимое второго таба</div>
				</dd>
				<dt>Таб3</dt>
				<dd>
					<div class="tab-content">содержимое третьего таба	</div>	
				</dd>							
			</dl>

2. Как видите, табы и их содержимое находятся в одной таблице. Чтобы они приобрели нужное оформление, отредактируйте файл style.css, вставив в него код:

.tabs { width:400px; overflow:hidden; margin:0; zoom:1; padding:1px ;position:relative; }
.tabs dt { float:left; line-height:2; height:2em; background:#fff; border:1px solid #codec; border-bottom:0; padding:0 1em; position:relative; left:35px; margin-right:1px; cursor:pointer; }
.tabs dt:hover { background-color:#codec; }
.tabs dt.selected { border-color:#aaa; background:#fff; z-index:3; cursor:auto; }
.tabs dd { background:#fff; display:none; float:right; width:100%; margin:2em 0 0 -100%; position:relative; z-index:2; }
.tabs dd.selected { display:block; }
.tabs .tab-content { background:#fff; border:1px solid #codec; padding:20px 20px 10px 20px; }

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

3. Чтобы активировать табы и автоматически выделить первый, нужно подключить скрипт. Откройте файл header.php, и вставьте в него такой код:

		
			$(function(){
				$('dl.tabs dt').click(function(){
					$(this)
						.siblings().removeClass('selected').end()
						.next('dd').andSelf().addClass('selected');
				});
			});
		

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