Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript

Как создать адаптивные вкладки (табы) с помощью CSS и JavaScript

by
Difficulty:IntermediateLength:ShortLanguages:

Russian (Pусский) translation by Anna Goorikova (you can also view the original English article)

В этом руководстве мы узнаем, как создать отзывчивые вкладки с помощью CSS и немного JavaScript. Вполне возможно создавать вкладки на чистом CSS, но для этого примера давайте на практике наработаем наши навыки JavaScript.

Вот что мы собираемся сделать в несколько больших шагов:

Примечание: Это руководство не нацелено на то, как сделать вкладки доступными, поэтому это безусловно, будет правильным следующим шагом.

1. HTML

Для начала рассмотрим требуемую разметку. У нас есть контейнер, который включает сами вкладки (элементы списка), а также содержимое каждой вкладки (панель вкладок). Чтобы связать вкладку с соответствующей панелью, мы используем пользовательский атрибут data-index, который содержит уникальное значение для каждой панели вкладок. Тем не менее, из-за нумерации, начинающейся с нуля, панель с data-index = 0 связана с первой вкладкой, панель с data-index = 1 связана со второй и так далее.

Вот разметка HTML:

2. CSS

В качестве следующего шага давайте укажем несколько правил CSS для нашего компонента. Ничего особенного, просто некоторые основные стили. Следует отметить, что мы не используем никаких переходов (например, fade, slide) для переключения между вкладками; вместо этого они появляются и исчезают с помощью простого переключателя on/off.

Вот начальные стили:

3. JavaScript

HTML и CSS на месте, теперь пришло время посмотреть на требуемый код JavaScript.

Каждый раз, когда мы нажимаем на вкладку, мы делаем следующее:

  • Удаляем класс active с соответствующей вкладки (по умолчанию первой) и с соответствующей панели вкладки  (по умолчанию первой).
  • Находим родительский элемент li этой вкладки, добавляем к нему класс active и возвращаем его индекс.
  • Находим панель вкладок, значение атрибута которой (для атрибута data-index) соответствует указанному выше значению индекса и присваивает ей класс active.

Вот результат кода JavaScript:

4. Делаем адаптивность

Наш компонент почти готов! Последнее, что нам нужно сделать, это сделать компонент адаптивным. Так, например, когда область просмотра имеет максимальную ширину 600 пикселей, она должна коллапсировать и выглядеть следующим образом:

How the tab component looks like on small screens

Поскольку мы используем desktop-first подход, вот правила CSS, которые мы должны перезаписать:

5. Поддерживаемые браузеры

Наше демо хорошо работает во всех последних браузерах и устройствах. Как обычно, в моих руководствах мы используем Babel для компиляции кода ES6 до ES5.

Заключение

В этом кратком руководстве нам удалось создать полезный адаптивный компонент Вкладки с HTML, CSS и JavaScript. Опять же, этот компонент имеет не очень хорошую доступность, но если вы хотите улучшить его функциональность, это будет хорошим следующим шагом. Хорошего кода!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.