Простой способ создания табов (вкладок) на jQuery

Случается так, что на странице бывает немалое количество контента, в результате чего страница выглядит очень нагроможденной. Есть множество способов оптимально настроить отображение контента и один из них, это использование табов (вкладок). Если Ваш сайт сделан с использованием какой-либо CMS, то несложно найти специализированные для этих целей плагины. Но многим не хотелось бы нагромождать свой сайт сторонними плагинами, поэтому предлагаю реализовать свой скрипт работы с табами, это позволит самому решать, в каком месте они будут задействованы, а также позволит следить за их правильным оформлением.

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

Как это работает?

Создайте файл JS с именем tabs_script.js и добавьте в него следующий код:

Скрипт довольно простой, он отслеживает клик по табу $(‘dl.tab’), добавляет класс .active нажатому табу и удаляет его у всех соседних $(this).addClass(‘active’).siblings().removeClass(‘active’), заключая содержимое дочерних объектов каждого элемента из набора совпавших элементов (включая текстовые блоки) в конструкцию HTML с помощью функции wrapInner().

Создайте файл CSS с именем tabs_style.css и добавьте в него следующий код:

Здесь ничего сложного, Вы вправе изменить оформление табов так, как Вам захочется. Обратите внимание, что имеются двойные классы, а именно .horizontalдля горизонтальных табов и .vertical для вертикальных.

Файлы созданы, теперь необходимо создать структуру страницы, для этого создайте файл index.html и добавьте следующий код (также, чтобы всё это у нас работало правильно, убедитесь, что Вы подключили библиотеку jQuery):

Как видите, мы используем списки данных DL, DT и DD. Сами табы у нас отделяются друг от друга с помощью тега DL, заголовки табов заключаем в теги DT и соответственно содержимое этих табов у нас находится в тегах DD.

Как быть владельцам CMS? Вы можете подключить файлы скрипта и стилей в своем шаблоне, а конструкцию табов прописывать в тексте материалов (статей).

Вы можете ознакомиться с примером работы табов скачав архив из вложения в конце статьи.

Полезность статьи

Оцените, на сколько полезной оказалась статья.
1 балл2 балла3 балла4 балла5 баллов
Пока оценок нет
Комментарии

Здесь еще никто не оставлял комментарии.

Добавить комментарий

* - поля обязательные для заполнения. E-mail не публикуется.