Универсальное таб меню с вкладками.

Вступление.

В интернете можно найти достаточно много скриптов для управления меню на вкладках, написанных как на чистом JavaScript, так и на jQuery или с использованием его плагинов. К сожалению, большинство из них имеет достаточно большой недостаток, который заключается в том, что они не обладают большой гибкостью и универсальностью. Все вкладки связанны с открываемыми блоками через id, href и т.д. Добавление новых вкладок и соответствующих им блоков требует особого внимания, чтобы не запутаться в различных идентификаторах, особенно, если на странице несколько таких таб меню.

В этой статье мы подробно рассмотрим небольшой универсальный скрипт управления таб меню, написанный на ванильном JavaScript, который лишен перечисленных выше недостатков:

во-первых, отсутствие каких-либо идентификаторов;
во-вторых, гибкая связь между вкладкой (табом) и соответствующим ей блоком с контентом, основанная на навигации по DOM-элементам;
в-третьих, можно создавать сколько угодно таких меню с любым количеством вкладок (конечно, всё в пределах разумного).

HTML-разметка меню с табами.

Ниже представлена HTML-разметка меню, использующего табы. За основу меню взят немаркированный список <ul>, а элементами управления будут <li>. Использование <li> в качестве интерактивного элемента устраняет ещё одну довольно распространённую ошибку — использование для этих целей тэга <a> (ссылки).

Запомните, это очень важно.
Как с точки зрения семантики, так и с точки зрения СЕО — тэг <a> должен использоваться только для формирования ссылок, ведущих на другие страницы сайта или другой интернет-ресурс. Для управления элементами текущей страницы (показать / скрыть, изменить стиль, переместить, подгрузить и т.д.) должны использоваться элементы <span>, <button>, <div>, <li>. Именно на них вешаются обработчики событий.

Как и писалось ранее, в вёрстке отсутствуют какие-либо идентификаторы элементов. При необходимости, можно без проблем добавить ещё несколько вкладок и блоков, которые они будут открывать. Даже можно добавить ещё одно таб меню и при этом не нужно беспокоиться об уникальности идентификаторов, обеспечивающих связь между вкладкой <li> и соответствующим ей блоком <div>.

Таблица стилей для меню с табами.

Представлены только стили, относящиеся непосредственно к сменю с вкладками:

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

Если возникнет необходимость создать на этой странице ещё одно меню с вкладками, то достаточно продублировать HTML-разметку первого меню, изменив, естественно, контент блоков. При необходимости, можно изменить внешний вид нового таб меню, добавив ему класс .tabsmenu2

Добавим в таблицу CSS стили для этого класса:

Пишем JavaScript для управления таб меню.

Для ограничения области видимости, разместим скрипт в анонимной самозапускающейся функции, чтобы не было конфликтов с другими JS-скриптами подключенными к странице.

При написании JS-скрипта мы будем использовать конструкцию Class. Это позволит создать несколько экземпляров меню на вкладках на одной странице.

Создание экземпляров таб меню.

В-первую очередь, создадим коллекцию объектов всех таб меню, которые расположены на странице. Если на странице меню не окажется, то сделаем return. Это необходимо для исключения ошибок и блокировки других скриптов JS, которые могут быть подключены к данной странице. Далее, с помощью метода for...of переберём полученную коллекцию, при этом создавая экземпляры текущего меню с вкладками, используя конструктор класса Tabsmenu.

Весь дальнейший JS-код мы будем писать внутри конструкции class Tabsmenu { ... }.

Прежде всего рассмотрим конструктор класса Tabsmenu. Конструктор инициализирует ряд объектов и переменных, содержащих информацию об экземпляре таб меню. Кроме этого, в конструкторе зарегистрирован обработчик события, который будет срабатывать при клике по родительскому элементу таб меню. В качестве аргумента конструктор принимает объект tab menu, экземпляр которого создаётся в данный момент.

Переключение вкладок меню.

При срабатывании обработчика события, вызывается функция swithTab. Алгоритм работы этой функции не сложен:

  1. убеждаемся, что клик сделан по элементу <li>, формирующим вкладку;
  2. определяем индекс вкладки по которой был сделан клик;
  3. перебираем все вкладки текущего экземпляра таб меню и удаляем класс active;
  4. используя полученный индекс, делаем активной вкладку, по которой был клик;
  5. вызываем функцию переключения блоков с контентом switchBloks, передавая ей в качестве параметра индекс активной вкладки.

Код функции swithTab и комментарии к нему:

Переключение блоков с контентом.

Теперь рассмотрим подробнее функцию switchBlock. Задачей данной функции является включение контейнера соответствующего активному табу и отключение всех остальных контейнеров. Код функции очень простой и в дополнительном разъяснении не нуждается:

Заключение.

Как видно из статьи, вёрстка таб меню и скрипт управляющий его работой, достаточно простые. При необходимости данное меню легко расширяется. Можно добавить как новые вкладки и контейнеры с контентом, так и новое таб меню в целом.

Комментарии

Всего: пока нет комментариев
Требования при посте комментариев:
  1. Комментарии должны содержать вопросы и дополнения по статье, ответы на вопросы других пользователей.
    Комментарии содержащие обсуждение политики, будут безжалостно удаляться.
  2. Для удобства чтения Вашего кода, не забываейте его форматировать. Вы его можете подсветить код с помощью тега <pre>:
    <pre class="lang:xhtml"> - HTML;
    <pre class="lang:css"> - CSS;
    <pre class="lang:javascript"> - JavaScript.
  3. Если что-то не понятно в статье, постарайтесь указать более конкретно, что именно не понятно.

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

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