Tabs (табы) вкладки на CSS

Варианты вкладок с помощю Javascript: Заготовка и поборка примеров.

Решение. Чтобы организовать контент на странице сайта в виде вкладок (еще называют «табы») можно использовать нижеприведенный Код №1 из Примера 1:

.tabs > div, .tabs > input {display: none}

.tabs label {padding: 5px; border: 1px solid #d33; line-height: 28px; cursor: pointer; position: relative; bottom: 1px;}
.tabs > input:checked + label {background: #f83b2b59;}

.tabs > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.tabs > input:nth-of-type(3):checked ~ div:nth-of-type(3) {display: block; padding: 5px; border: 1px solid #d33; margin-bottom: 20px;}

HTML CSS Вкладка 3

</p>
<p><div class=”tabs”><br />
<input type=”radio” name=”name1″ checked=”checked” id=”htmltab”><br />
<label for=”htmltab”>Вкладка 1</label><br />
<input type=”radio” name=”name1″ id=”csstab”><br />
<label for=”csstab”>Вкладка 2</label><br />
<input type=”radio” name=”name1″ id=”tab3″><br />
<label for=”tab3″>Вкладка 3</label><br />
<div>Контент для первой вкладки (для вкладки “HTML”)</div><br />
<div>Контент для второй вкладки (для вкладки “CSS”)</div><br />
<div>Контент для третей вкладки (для вкладки “Вкладка 3” – Контент третей вкладки…)</div></p>
<p>

<label for=“htmltab”>Вкладка 1</label>

<label for=“csstab”>Вкладка 2</label>

<label for=“tab3”>Вкладка 3</label>

<div>Контент для первой вкладки (для вкладки “HTML”)</div>

<div>Контент для второй вкладки (для вкладки “CSS”)</div>

<div>Контент для третей вкладки (для вкладки “Вкладка 3” – Контент третей вкладки…)</div>

</p>
<p><style><br />
.tabs > div, .tabs > input {display: none}</p>
<p>.tabs label {padding: 5px; border: 1px solid #d33; line-height: 28px; cursor: pointer; position: relative; bottom: 1px;}<br />
.tabs > input:checked + label {background: #f83b2b59;}</p>
<p>.tabs > input:nth-of-type(1):checked ~ div:nth-of-type(1),<br />
.tabs > input:nth-of-type(2):checked ~ div:nth-of-type(2),<br />
.tabs > input:nth-of-type(3):checked ~ div:nth-of-type(3) {display: block; padding: 5px; border: 1px solid #d33}<br />
</style></p>
<p>

<style>

.tabs > div, .tabs > input {display: none}

.tabs label {padding: 5px; border: 1px solid #d33; line-height: 28px; cursor: pointer; position: relative; bottom: 1px;}

.tabs > input:checked + label {background: #f83b2b59;}

.tabs > input:nth-of-type(1):checked ~ div:nth-of-type(1),

.tabs > input:nth-of-type(2):checked ~ div:nth-of-type(2),

.tabs > input:nth-of-type(3):checked ~ div:nth-of-type(3) {display: block; padding: 5px; border: 1px solid #d33}

</style>

Контент третей вкладки. Контент третей вкладки. Контент третей вкладки. Контент третей вкладки. Контент третей вкладки. Контент третей вкладки. Контент третей вкладки.

Пример1 и Код №1: Вкладки на чистом CSS

При добавлении или уменьшении количества вкладок нужно учесть, что нужно добавлять/убирать новые пары тега div и в стилях добавлять/убирать строки свойств «.tabs > input:nth-of-type(1):checked ~ div:nth-of-type(n)».

Подборка примеров вкладок на CSS

See the Pen
Pure CSS Project Filter Tabs (Responsive) by Jalaj (@jalajcodes)
on CodePen.

Пример 2.1: Красивые вкладки на HTML+CSS

See the Pen
Tabs only CSS by Gabriela (@GabrielaOR)
on CodePen.

Пример 2.2: Стильные зеленые вкладки на HTML+CSS

See the Pen
Tabs Only CSS by Taxi News (@TaxiNews)
on CodePen.

Пример 2.3: Красивые вкладки в красно-серой теме на HTML+CSS (SCSS)

See the Pen
inputタブ切り替えスライド by Peach-Code (@peach-code)
on CodePen.

Пример 2.4: Красивые табы с интересным эффектом на CSS

See the Pen
Tabs — Only CSS — Attention by Aurélien Talbot — Com’Bawa (@aurelientalbot_combawa)
on CodePen.

Пример 2.5: Вкладки на CSS в классическом стиле

Подборка примеров вкладок на CSS

Понравилась статья?

Похожие публикации