Табы можно использовать как для переключения отдельных статей, содержащих огромное количество информации, так и для помещения в них отдельно блока с новостями, категориями, подписками в общем всего, что вздумается. Данная модель табов работает на JQuery и может использоваться абсолютно на любом сайте будь это WordPress, Joomla, любая известная Вам CMS или на самом обычном сайте построенном на HTML.

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

Далее опишу подробную инструкцию по установке этого скрипта. Итак начнем.

Подключение скриптов

В HTML код страницы нам нужно подключить готовый файл данного скрипта, который прилагается в исходниках. Для этого через FTP загрузите файл tabs.js в папку с вашими скриптами, если такая имеется и укажите путь к данному файлу. Если же такой папки нет то создайте папку с название "js" в корневом каталоге своего сайта. Далее между тегами HEAD добавьте следующий код:

Показать код
 

Важно! Не забывайте подключать библиотеки JQuery. Многие используют библиотеки от Googl'а. Для этого в тоже место вашего HTML кода вставьте следующие строки:

Показать код
 

Это делается один раз и навсегда и в следующий раз, когда будете подключать другие скрипты этого делать не понадобится.

Подключаем CSS стили вкладок

Чтобы наши вкладки приобрели хоть какой то вид, нам нужно подключить CSS стили. Для этого также загружаете файл tabs.css из архива через FTP в папку где лежат стили вашего сайта, меняете путь к нему и в тоже место, где подключаем скрипты добавляем строку со следующим кодом:

Показать код

Итак, все скрипты и стили мы подключили теперь нам нужно вставить основной HTML код вкладок, который и будет отвечать за отображение наших вкладок (табов) на сайте.

Добавляем вкладки на сайт

После тега BODY, в то место где будут располагаться наши вкладки, добавляем следующий HTML код:

Показать код
  • Вкладка 1
  • Вкладка 2
  • Вкладка 3
  • Вкладка 4
  • Вкладка 5

1. Вкладка

Какой контент Вы сюда будете помещать абсолютно все равно.

Изменение количества вкладок

Для того, чтобы добавить или удалить вкладки нужно сделать следующее:

  1. В том месте где прописывается название вкладок просто удалите ненужные вам вкладки.
  2. Не забывайте в этом случает удалить контент относящий к этой вкладке.

Совместимость с браузерами

Проверено на Opera, Firefox, Mozilla, Chrome.

На этом наш урок по установке модуля с вкладками на сайт закончен. надеюсь все было понятно, если нет оставляйте комментарии, отвечу на все вопросы.

Желаю удачи.