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

Вступление.

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

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

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

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

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

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

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

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

Небольшая таблица стилей, которая определяет внешний вид меню с вкладками:

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

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

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

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

Получим коллекцию объектов всех таб меню, которые есть на странице. Если на странице меню не окажется, то сделаем return. Это необходимо для исключения ошибок и блокировки других скриптов JS, которые могут быть подключены к данной странице.

Теперь нам нужно повесить обработчик события click на каждое таб меню. В данной ситуации оптимальным решением будет использование метода forEach. Этот метод совершает обход коллекции таб меню и назначает обработчик вызовом метода addEventListener для каждого элемента.

При срабатывании события (по таб меню был сделан клик), уточняем, что клик произошел именно по вкладке меню, а не по его пустой области. Если клик был сделан по элементу <li>, то запускаем по очереди две функции: switchTab и switchBlock.

Рассмотрим функцию switchTab, отвечающую за переключение вкладок. Кроме этого, данная функция возвращает index активной вкладки. Этот индекс понадобиться для идентификации блока, соответствующему активному табу.

Функция принимает два аргумента:
1. menu — список <ul>, включающий в себя таб <li>, по которому был сделан клик;
2. tab — представляет из себя e.target, исходный элемент, на котором произошло событие (клик по вкладке).

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

Эта функция так же принимает два аргумента:
1. menu — список <ul>, включающий в себя таб <li>, по которому был сделан клик;
2. index — index активного таба в коллекции.

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

Комментарии

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *