Вкладки є набором блоків, між якими можна перемикатися клацанням по «виступу» із заголовком блоку (рис. 1).
Мал. 1. Вигляд вкладок
Для створення вкладок ми використовуємо групу перемикачів, оскільки вони дозволяють вибрати лише один перемикач із групи. Всі вкладки вставляємо <div> з класом tabs, а для кожної вкладки використовуємо набір з <input>, <label> та <section>, які вкладені в <div> з класом tab (приклад 1).
Приклад 1. Код окремої вкладки
<code data-language="html"><div class="tab"> <input type="radio" id="tab1" name="tab-group"> <label for="tab1" class="tab-title">Заголовок вкладки</label> <section class="tab-content"> Вміст вкладки </section> </div>
Елемент <input> потрібний для створення функціоналу вкладок, в стилях до нього пізніше додамо псевдоклас :checked. Елемент <label> використовується для заголовка кожної вкладки, його треба зв'язати з <input> за допомогою атрибутів id та for. A <section> зберігає вміст вкладки.
У CSS спочатку ховаємо вихідні перемикачі за допомогою властивості display зі значенням none.
input[type="radio"] { display: none; }Щоб вкладки розташовувалися по горизонталі, додамо до класів tab та tab-title властивість display зі значенням inline-block.
. tab, .tab-title { display: inline-block; }Заголовок вкладок зробимо сірого кольору з рамкою, активна вкладка буде білою. Стиль заголовка активної вкладки отримуємо за рахунок комбінації селекторів :checked та tab-title. У стилі <label> зміщуємо на один піксель вниз, щоб заголовок та вміст вкладки утворювали єдиний простір без лінії знизу. І додаємо властивість 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 { display: block; }Втім, його можна замінити на більш витончений і компактний за допомогою братського селектора.
.tab :checked ~ . tab-content { display: block; }Остаточний код для створення вкладок за допомогою псевдокласу :checked показаний у прикладі 2.
Приклад 2. Вкладки на CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Вкладки</title> <style> .tabs {position: relative; /* Відносне позиціонування */
}
.tab, .tab-title { display: inline-block; /* Вибудовуємо по горизонталі */
}
.tab input[type="radio"] { display: none; }
.tab-title { background: #ccc; /* Колір тла */
padding: 5px 10px; /* Поля навколо тексту */
border: 1px solid #666; /* Параметри рамки */
border-bottom: none; /* Знизу лінію забираємо */
}
.tab-content { position: absolute; /* Абсолютне позиціонування */
border: 1px solid #666; /* Параметри рамки */
padding: 10px; /* Поля навколо тексту */
left: 0; /* Розміщуємо біля лівого краю */
width: calc(100% — 20px); /* Ширина вмісту */
display: none; /* Ховаємо вкладку */
}
.tab :checked + .tab-title { position: relative; /* Відносне позиціонування */
background: #fff; /* Колір тла */
top: 1px; /* Зрушуємо вниз */
z-index: 1; /* Відображаємо поверх вмісту */
}
.tab :checked ~ .tab-content { display: block; /* Показуємо активну вкладку */
}
</style>
</head>
<body> <div class="tabs"> <div class="tab"> <input type="radio" id="tab1" name="tab-group" checked> <label for="tab1" class="tab-title">Вкладка 1</label> <section class="tab-content">Один</section>
</div> <div class="tab"> <input type="radio" id="tab2" name="tab-group"> <label for="tab2" class="tab-title">Вкладка 2</label> <section class="tab-content">Два</section>
</div> <div class="tab"> <input type="radio" id="tab3" name="tab-group"> <label for="tab3" class="tab-title">Вкладка 3</label> <section class="tab-content">Три</section>
</div>
</div>
</body>
</html>