Простые адаптивные вкладки (табы) для сайта на JavaScript и CSS

От автора: в данной статье мы рассмотрим, как сделать макет из нескольких адаптивных вкладок (табов) для сайта на JavaScript и CSS 3, который просто отлично подходит в тех случаях, когда необходимо вместить много связанного контента в маленькой и компактной области.

Часто вкладки можно встретить в блогах в виде виджетов сайдбаров, в которых, обычно, отображаются последние или любимые посты, или категории. Но помимо второстепенной роли вкладкам (табам) также отводят и главную роль на страницах. К счастью создавать вкладки (табы) для сайта не такое и сложное занятие. В этой статье мы рассмотрим все, что необходимо для их создания, даже позаботимся о устаревших браузерах с выключенным JS. Давайте разберем структуру и разметку вкладок.

Структура и разметка

Итак, наша структура включает в себя:

Секцию меню с вкладками. Активная вкладка подсвечивается

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

И сами вкладки, которые или спрятаны, или видны

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

Значение для идентификатора можно взять любое, оно пригодится позже в JavaScript. Также обратите внимание на класс no-js, его мы будем удалять перед манипуляциями с JS. Если вы работали с библиотеками с методом обнаружения поддерживаемых свойств, как Modernizr, то вам это будет знакомо. Добавим меню:

Я сразу сделал первую вкладку активной, первый индекс в JavaScript будет 0. Обратите внимание на то, что количество вкладок может изменяться, но обязательно необходимо, чтобы количество табов и ссылок на них было равным. Перейдем к вкладкам: каждая вкладка это отдельный DIV. У первого блока сразу добавлен класс is-active. Конечная разметка выглядит так:

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

Добавляем стили в CSS

Замечание: я использую flexbox, для автоматической генерации вендорных префиксов autoprefixer с Gulp. В CSS ниже я не писал вендорные префиксы. Если вам нужна готовая версия, она есть на GitHub. Блоки c-tabs как таковых стилей не требуют, так что начнем с меню. Меню у нас состоит из набора ссылок, ниже я добавил немного стилей:

Пройдемся по стилям меню. Основной контейнер это элемент flexbox с классом c-tabs-nav. Каждая ссылка это резиновый элемент с классом c-tabs-nav__link, который растягивается так, чтобы вместить все элементы с небольшими отступами между ссылок. На каждую ссылку вешается событие клика для переключения между вкладок. Также ссылки будут менять свое состояние в зависимости от того, навели на них мышку или кликнули. В демо у каждой ссылки своя иконка и текст в тегах I и span соответственно. На маленьких экранах текст в span скрывается для экономии места. Сделать это можно простым медиа запросом, который мы добавим в конец файла.

Теперь рассмотрим стили для конкретной вкладки:

Ну тут все просто и интуитивно понятно, но все же пройдемся поэтапно. Каждому табу присвоен класс c-tab, все вкладки спрятаны по умолчанию (display: none). Если к элементу добавляется класс is-active, то значение свойства display меняется на block. Класс c-tab__content отвечает за область контента внутри вкладки, функциональной нагрузки он не несет. Хотя через него можно напрямую обращаться ко вкладкам, не трогая основной контейнер.

На данном этапе у вас на экране уже должно быть что-то привлекательное. Но по клику по ссылкам меню ничего не происходит! Без паники, сейчас исправим.

Вдохнем жизнь при помощи JS

Давайте поэтапно распишем, чего мы хотим добиться с помощью JS:

Нам необходимо каким-то образом найти компоненты, чтобы потом их настроить

Нужно как-то инициализировать компоненты

Необходимо проверить, на все ли вкладки навешены обработчики события

Нам нужен метод для перехода к указанной вкладке, который можно вызывать как внутри, так и из разметки

И в конце концов, нужно получить доступ к нашим компонентам, т.е. необходимо добавить их в глобальное пространство имен

Поручим это дело IIFE:

Теперь настроим нашу функцию и сделаем ее глобальной:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Обратите внимание, что функция tabs принимает один аргумент option. Добавим пару переменных в кэш, сделав их доступными для следующей нашей функции:

Мы инициализировали пять переменных:

El – содержит элемент, найденный по селектору через option

tabNavigationLinks – коллекция ссылок меню с определенным классом, полученных через option

tabContentContainers – контент вкладок с определенными классами, полученный через option

activeIndex – индекс активной вкладки, по умолчанию равен 0

initCalled – булево значение, по умолчание равно false. Используется для проверки, вызывалась ли функция init, т.к. более одного раза данную функцию вызывать не нужно.

Подумаем дальше. Нам нужна какая-то функция, которая будет пробегаться по всем ссылкам вкладок и вешать на них обработчики событий, а также удалять класс no-js. И, естественно, нужна функция для обработки этих событий. И, наконец, нужна функция, которая будет переключать нас на заданную вкладку по ее индексу, которая будет вызываться из функции обработчика. Забегая наперед, нам нужно сделать так, чтобы функцию инициализации и функцию по переходу на конкретную вкладку можно было вызывать в любом месте. Благодаря нашему JS и переменной initCalled со значением по умолчанию false, мы можем быстро вернуться из любой функции обратно в инициализатор. Ниже представлен код:

📎📎📎📎📎📎📎📎📎📎