Как создать адаптивный компонент вкладок с использованием CSS и совсем немного JavaScript

Как создать адаптивный компонент вкладок с использованием CSS и совсем немного JavaScript

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

Вот что мы собираемся создать:

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

1. HTML

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

2. CSS

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

3. JavaScript

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

удаляем для соответствующей вкладки (по умолчанию первая) и соответствующей панели (по умолчанию первая) класс active.

находим родительский элемент li для этой вкладки, добавляем для него класс active и возвращаем его индекс.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вот полный код JavaScript:

4. Адаптивные функции

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

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

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

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

Заключение

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

Автор: George Martsoukos

Источник: https://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree