Сегодня создадим три вкладки (tabs) , переключаясь между которыми, поочередно будет скрываться или снова показываться, содержимое всех вкладок.

Как сделать вкладки в HTML

Сегодня создадим три вкладки (tabs), переключаясь между которыми, поочередно будет скрываться или снова показываться, содержимое всех вкладок.

В каких случаях целесообразно размещать контент на сайте во вкладках?

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

Я знаю, что начинающие веб-разработчики, "шарахаются" от нативного способа (с применением JS) делать подобные вкладки. Предпочитая, не вникать в технические детали, хватаются за готовый плагин на jQuery (смотрите урок по Easytabs) или берут готовый компонент на Bootstrap.

Как сделать вкладки в HTML.

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

Демонстрация вкладок

HTML код вкладки

Внутри контейнера див с классом tab, создадим 3 кнопки-ссылки (названия городов) с классом tablinks, заранее повесим на кнопки события по клику и дадим название функции openCity. При клике по кнопке отработает эта функция, первым аргументом события будет - event.

<div class="tab">
  <button class="tablinks">Москва</button>
  <button class="tablinks">Берлин</button>
  <button class="tablinks">Пекин</button>
</div>

Дальше создадим три блока с контентом для каждого таба, каждому блоку присвоим ID для получения нужных элементов и классы для стилизации их.

<div id="Москва" class="tabcontent">
  <h3>Москва</h3>
  <p>Москва это столица России.</p>
</div>
<div id="Берлин" class="tabcontent">
  <h3>Берлин</h3>
  <p>Берлин это столица Германии.</p>
</div>
<div id="Пекин" class="tabcontent">
  <h3>Пекин</h3>
  <p>Пекин это столица Китая.</p>
</div>

CSS код вкладки


See the Pen Tabs with CSS and JavaScript by porsake (@porsake) on CodePen.


Комментарии для CSS кода


1) Зададим для блока с классом tab контейнера цвет фона и рамку.
2) Сделаем кнопки-переключатели button с тем же фоном, без рамок, с отступами для названий городов и плавным переходом.
3) Поменяем цвет фона при наведении на кнопки button:hover.
4) Зададим цвет фона и цвет ссылки для активной кнопки вкладки button.active.
5) Сделаем блоки с контентом tabcontent невидимыми с отсутствующей верхней рамкой.

JS код вкладки


See the Pen Tabs with CSS and JavaScript by porsake (@porsake) on CodePen.


Комментарии для JS кода


1) Объявим все переменные.
2) Получим все элементы с классом tabcontent и спрячем их.
3) Получим все элементы с классом tablinks и удалим активный класс.
4) Покажем текущую вкладку и добавим активный класс на кнопку, которая откроет вкладку с ID по названию города.