Краткое руководство
по созданию вкладок
с помощью HTML. Часть 2

Вкладки веб-сайта нужны для того, чтобы структурировать большие объемы информации без создания отдельных страниц сайта. Вкладки также помогают вашим пользователям легко ориентироваться на сайте и не запутаться в большом потоке информации.

В 1-ой части нашей статьи мы подробно рассмотрели создание вкладок с помощью  HTML. В этой части статьи мы рассмотрим создание вкладок в разрезе CSS и JavaScript.

1. Настройте CSS

CSS важен для оформления и форматирования вкладок и их содержимого. Свойство CSS также используется для отображения или скрытия самого контента. Откройте файл CSS и введите следующий код:

Давайте более подробно рассмотрим значения строк:

• Как и в HTML, все строки зеленого цвета — это  комментарии для разработчика, которые нужны, чтобы рассказать том, для чего нужен каждый раздел кода.
• Строки 2-6 здесь будут применяться ко всем элементам, которые имеют атрибут класса «tab» в файле HTML, который относится к элементу div в строке 7

• Строки 9-17 будут применяться ко всем элементам кнопки, которые являются дочерними элементами с атрибутом класса «tab». Это относится к элементам кнопки в строках 7-10 HTML-файла.

• Строка 20 особенная, так как в ней используется псевдокласс под названием «:hover», который по умолчанию есть у всех элементов. Таким образом, при наведении указателя мыши на любую из кнопок в строках 8–10 HTML-файла, к элементу будет применен цвет фона в строке 21.
• Строка 25 применяет стиль из строки 26 к любой кнопке с активным классом. В этом примере нет кнопок с таким классом, но он будет добавлен чуть позже в разделе JavaScript в этом руководстве. Это будет полезно, если вы хотите отделить активную вкладку от неактивных, чтобы помочь пользователям отслеживать, на какой вкладке они находятся.
• Строки 30-35 будут применены ко всем элементам с атрибутом класса tabcontent. В нашем примере это относится к элементам div в строках 14–17, 19–25 и 27–30 HTML-файла.

Теперь, даже когда HTML и CSS работают вместе, ваша веб-страница по-прежнему не может полноценно функционировать, поэтому важно завершить процесс с помощью JavaScript.

4. Настройте JavaScript

JavaScript позволяет вам делать изменения в вашем HTML и CSS при возникновении событий, например при нажатии кнопки мыши.  Ниже пример содержимого файла JavaScript:

Технически весь файл представляет собой одну функцию под названием «openTab», которая начинается в строке 1 и заканчивается в строке 20. 

Функция принимает два аргумента, «evt» и «tabName», которые относятся к событию и имени вкладки при нажатии. Событие, как мы и проговорили выше, — это  щелчок мышью по кнопке, а tabName будет ссылаться на атрибут id HTML-элемента, который мы пытаемся отобразить.

Строки зеленого цвета — это  комментарии для разработчика, которые нужны, чтобы рассказать том, для чего нужен каждый раздел кода.

Строки 6–9 получают массив всех элементов, которые содержат имя класса «tabcontent». Далее для их свойства display устанавливается значение «none», чтобы скрыть их. Без этого мы бы отобразили весь контент сразу без нажатия мыши на вкладку.

Строки 11-15 удаляют имя «активного» класса с кнопок. Теперь они выглядят одинаково.

Строка 18 делает содержимое элемента видимым. Ранее переданный аргумент tabName относился к «About me», поэтому эта строка кода получит элемент с таким же названием. Строка 19 добавит имя «активного» класса к нажатой кнопке.

Когда все шаги завершены, откройте файл index.html в любом веб-браузере. Наш итоговый вариант вкладок будет выглядеть следующим образом:  

^{Источник: hubspot.com}