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

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

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

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

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

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

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

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

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

tiaurus

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

18 комментариев

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

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

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

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

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

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

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

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

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

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

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

/* ]]> */