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

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

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

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

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

			
Таб1
содержимое первого таба
Таб2
содержимое второго таба
Таб3
содержимое третьего таба

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

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

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

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

  1. Очень интересное решение использовать табы.

    Действительно повышает удобство комментирования и наводит порядок в нагромождении способов авторизаций.

  2. просто он его так долго открывает, вот и думаю с табами что то не так или виджет фейсбука кривой

  3. а нет все работает div / не с той стороны закры :) респект и уважуха, пол интернета облазил искал как табы сделать

  4. Здравствуйте, подскажите плиз, у меня почему-то не переключаются табы, где может быть ошибка? И как правильно вставлять табы в запись?

  5. для того, чтобы органично вписать табы в тему мне нужно убрать

     overflow:hidden; 

    , но без него один таб наезжает на другой. возможны еще варианты?

    • в идеале бы было разделить на .tabs dt1 и .tabs dt2, но тогда не срабатывает код

      как его подправить для dt1 и dt2 ?

      п.с. маюсь уже 4й час :(

  6. Пользуюсь этой переключалкой давно для комментариев. Решил вынести соц сети в эти табы, но приключилась странная вещь: создаю 3 вкладки и почему-то не отображается содержимое 3 вкладки, что интересно при загрузке страницы если нажать сразу на третью табу то содержимое загружается, но не показывается в одном из других, что это может быть?

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

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


*