На этом уроке научимся делать простые вкладки на чистом CSS и никакого JavaScript . В ряде случаев этого решения вполне достаточно, ограничиваясь возможностями только CSS стилей.
На этом уроке научимся делать простые вкладки на чистом CSS и никакого JavaScript. В ряде случаев этого решения вполне достаточно, ограничиваясь возможностями только CSS стилей.
HTML код
Сначала создадим обертку для вкладок с классом wrap. Затем блок для вкладок tabs, навигацию для переключения вкладок tabs__items, вкладки-ссылки tabs__item. В адресах ссылок пропишем названия-якоря и точно такие же названия укажем в идентификаторах у текстовых блоков, таким образом связав их между собой. Далее создадим три блока с содержимым табов tab__box.
<div class="wrap">
<div class="tabs">
<nav class="tabs__items">
<a href="#tablink_01" class="tabs__item"><span>Вкладка #1</span></a>
<a href="#tablink_02" class="tabs__item"><span>Вкладка #2</span></a>
<a href="#tablink_03" class="tabs__item"><span>Вкладка #3</span></a>
</nav>
<div>
<div id="tablink_01" class="tab__box">
рыба-текст
</div>
<div id="tablink_02" class="tab__box">
рыба-текст
</div>
<div id="tablink_03" class="tab__box">
рыба-текст
</div>
</div>
</div>
</div>
CSS код
Сделаем для обертки отступ сверху, ограничим ее по ширине и расположим по середине.
.wrap {
padding: 40px 0;
max-width: 900px;
margin: 0 auto;
}
Сделаем оболочку для табов флекс-контейнером, для построения табов в один ряд.
.tabs__items {
display: flex;
}
Поделим поровну пространство для табов и так же сделаем их контейнером для ссылок.
.tabs__item {
flex: 0 1 33.333%; // управление размерами вкладок
height: 50px; // высота вкладок
display: flex;
justify-content: center; // центрирование по горизонтали
align-items: center; // центрирование по вертикали
text-transform: uppercase; // перевод в верхний регистр
color: #fff; // цвет ссылок
text-decoration: none; // убираем подчеркивание ссылок
}
Изначально все вкладки нужно спрятать.
.tab__box {
position: relative; // относительное позиционирование
padding: 20px; // внутренние отступы
font-size: 18px;
line-height: 24px;
display: none; // вкладки скрыты
}
Как добиться, чтобы при нажатии на вкладку, показалось ее содержимое? Поможет нам псевдо-класс :target, который при клике по цели, применит заданный стиль к элементу с якорем.
.tab__box:target {
display: block; // покажет содержимое при клике
}
Мы хотим, чтобы при клике, сам таб и бокс с контентом меняли цвет фона и здесь без псевдоэлемента никак не обойтись. Создадим для вкладок с контентом пустые блоки при помощи псевдоэлемент :before.
.tab__box:before {
content: "";
height: 50px;
width: 33.333%;
position: absolute;
top: -50px;
}
Покрасим все блоки в два разных цвета, обратившись к каждому через псевдокласс :nth-child.
.tab__box:nth-child(1) {
background-color: #3fc1c9;
}
.tab__box:nth-child(1):before {
background-color: #3fc1c9;
left: 0;
}
.tab__box:nth-child(2) {
background-color: #fc5185;
}
.tab__box:nth-child(2):before {
background-color: #fc5185;
left: 33.333%;
}
.tab__box:nth-child(3) {
background-color: #3fc1c9;
}
.tab__box:nth-child(3):before {
background-color: #3fc1c9;
right: 0;
}
Цветной фон перекрывает меню навигации, поэтому переместим надпись на слой выше.
.tabs__item span {
position: relative;
z-index: 2;
}
