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

Вкладки на CSS

Вкладки представляют собой набор блоков, между которыми можно переключаться щелчком по «выступу» с заголовком блока (рис. 1).

Рис. 1. Вид вкладок

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

Пример 1. Код отдельной вкладки

Элемент нужен для создания функционала вкладок, в стилях к нему позже добавим псевдокласс :checked . Элемент используется для заголовка каждой вкладки, его надо связать с с помощью атрибутов id и for . A хранит содержимое вкладки.

В CSS сперва прячем исходные переключатели с помощью свойства display со значением none .

input[type="radio"]

Чтобы вкладки располагались по горизонтали, добавим к классам tab и tab-title свойство display со значением inline-block .

.tab, .tab-title

Заголовок вкладок сделаем серого цвета с рамкой, активная вкладка будет белой. Стиль заголовка активной вкладки получаем за счёт комбинации селекторов :checked и tab-title . В стиле смещаем на один пиксель вниз, чтобы заголовок и содержимое вкладки образовывали единое пространство без линии снизу. И добавляем свойство z-index для отображения заголовка поверх содержимого вкладки.

.tab :checked + .tab-title < position: relative; /* Относительное позиционирование */ background: #fff; /* Цвет фона */ top: 1px; /* Сдвигаем вниз */ z-index: 1; /* Отображаем поверх содержимого */ >

Содержимое каждой вкладки прячем опять же через display . Нам также требуется явно задать ширину блока как 100%, так он будет занимать всю доступную ширину. Чтобы значение padding не влияло на ширину блока, можно воспользоваться свойством box-sizing или вычислить ширину через функцию calc().

.tab-content < padding: 10px; /* Поля вокруг текста */ width: 100%; /* Ширина */ box-sizing: border-box; /* Ширина не включает padding */ или padding: 10px; /* Поля вокруг текста */ width: calc(100% - 20px); /* Ширина содержимого */ >

Стиль содержимого активной вкладки задаём через довольно громоздкий селектор.

.tab :checked + .tab-title + .tab-content

Впрочем, его можно заменить на более изящный и компактный с помощью братского селектора.

.tab :checked ~ .tab-content

Окончательный код для создания вкладок с использованием псевдокласса :checked показан в примере 2.

Пример 2. Вкладки на CSS

См. также

• box-sizing
• height
• width
• Аккордеон меню
• Выпадающее меню
• Использование :checked
• Открываем блочную модель
• Подсказка в поле формы
• Пользовательские формы
• Псевдокласс :checked
• Размеры блока
• Спойлер
• Стилизация переключателей
• Стилизация флажков
• Строчно-блочные элементы
• Формы в Bootstrap 4
• Формы в HTML
• Элемент label

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

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

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

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

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

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

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

HTML код вкладки

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

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

CSS код вкладки

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

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

JS код вкладки

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

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

Создано 03.12.2018 10:02:31

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 2 ):

Kasvituki 26.03.2019 01:06:23

Очень понравился материал. Но я новичок в этом деле и мне не совсем понятно, как сделать, чтобы при открытии страницы по умолчанию была активна первая вкладка и чтобы она была раскрыта.

mkdmkd1 28.01.2022 04:12:21

Впервые вижу чтобы идентификаторы писали кириллицей, весь код должен быть на английском.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Создание вкладок при помощи HTML и CSS

В данной теме мы рассмотрим простой скрипт создания вкладок при помощи HTML и CSS.

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

При использовании вкладок посетитель может просмотреть без перезагрузки странички интересующую его информацию, просто кликнув по заголовку нужной вкладки.

Наш скрипт является легким и быстрым т.к. не использует JavaScript код или какие-либо плагины и библиотеки.

Ниже Вы можете наблюдать пример создаваемых данным скриптом вкладок:

Вкладка № 1 Вкладка № 2 Вкладка № 3 Вкладка № 4

Размеры содержимого вкладок

могут отличаться по высоте!

Как видно из примера, содержимое каждой вкладки может быть различным по высоте, чего частенько не встретишь в других подобных скриптах (у них все вкладки одинаковые по высоте). Количество вкладок и их оформление также можно легко изменить.

При создании вкладок HTML разметка вкладок выглядит следующим образом:

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

< style type = "text/css" >
. tabs < width : 100 %; padding : 0px ; margin : 0 auto ; >
. tabs > input < display : none ; >
. tabs > div display : none ;
padding : 12px ;
border : 1px solid #C0C0C0;
background : #FFFFFF;
>
. tabs > label display : inline — block ;
padding : 7px ;
margin : 0 — 5px — 1px 0 ;
text — align : center ;
color : #666666;
border : 1px solid #C0C0C0;
background : #E0E0E0;
cursor : pointer ;
>
. tabs > input : checked + label color : #000000;
border : 1px solid #C0C0C0;
border — bottom : 1px solid #FFFFFF;
background : #FFFFFF;
>
#tab_1:checked ~ #txt_1,
#tab_2:checked ~ #txt_2,
#tab_3:checked ~ #txt_3,
#tab_4:checked ~ #txt_4 < display: block; >

В результате использования вот такого нехитрого кода можно значительно сэкономить место на страничках сайта и систематизировать размещение контента.

Как сделать — Вкладки

Узнать, как создать вкладки с помощью CSS и JavaScript.

Вкладки

Вкладки идеально подходят для одностраничных веб-приложений или для веб-страниц, способных отображать различные темы:

Лондон

Лондон является столицей Англии.

Париж

Париж является столицей Франции.

Токио

Токио является столицей Японии.

Создание переключаемых вкладок

Шаг 1) Добавить HTML:

Пример

Создание кнопок для открытия определенного содержимого вкладки. Все элементы с class=»tabcontent» скрыты по умолчанию (с помощью CSS и JS). Когда пользователь нажимает на кнопку, он открывает содержимое вкладки, которое «соответствует» этой кнопке.

Шаг 2) Добавить CSS:

Стиль кнопок и содержимого вкладки:

Пример

/* Стиль вкладки */
.tab overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
>

/* Стиль кнопок, которые используются для открытия содержимого вкладки */
.tab button background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
>

/* Изменение цвета фона кнопок при наведении курсора */
.tab button:hover background-color: #ddd;
>

/* Создание активного/текущего класса связи вкладки */
.tab button.active background-color: #ccc;
>

/* Стиль содержимого вкладки */
.tabcontent display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
>

Шаг 3) Добавить JavaScript:

Пример

function openCity(evt, cityName) <
// Объявить все переменные
var i, tabcontent, tablinks;

// Получить все элементы с помощью и спрятать их
tabcontent = document.getElementsByClassName(«tabcontent»);
for (i = 0; i < tabcontent.length; i++) tabcontent[i].style.display = "none";
>

// Получить все элементы с помощью и удалить class «active»
tablinks = document.getElementsByClassName(«tablinks»);
for (i = 0; i < tablinks.length; i++) tablinks[i].className = tablinks[i].className.replace(" active", "");
>

// Показать текущую вкладку и добавить «active» класс для кнопки, которая открыла вкладку
document.getElementById(cityName).style.display = «block»;
evt.currentTarget.className += » active»;
>

Вкладки исчезают:

Если вы хотите скрыть содержимое вкладки, добавьте следующий CSS:

Пример

.tabcontent <
animation: fadeEffect 1s; /* Эффект затухания занимает 1 секунду */
>

/* Перейти от нуля к полной непрозрачности */
@keyframes fadeEffect from
to
>

Показывать вкладку по умолчанию

Чтобы открыть определенную вкладку при загрузке страницы, используйте JavaScript, чтобы «нажать» на указанную кнопку вкладки:

Пример

// Получить элемент с помощью и нажмите на нее
document.getElementById(«defaultOpen»).click();

Закрыть вкладку

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