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

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

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

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

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

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

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

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

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

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

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

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

Удобство — главный двигатель прогресса. Хотите прокатиться с удобством, в роскоши кожаных сидений, в просторном салоне, попивая шампанское? Хотите торжественно провезти свою невесту по городу? Заказать лимузин Санкт-Петербурге на определенную дату и время вы можете на сайте limuzincom.ru. Никаких посредников — все лимузины находятся в собственности компании, а это значит, что высший сервис и низкие цены гарантированны.

tiaurus

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

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

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

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

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

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

/* ]]> */