Вкладки на странице (HTML + CSS)

29.08.2017 06:12:21 am

Недавно мне потребовалось сделать вкладки на одной странице, без перезагрузки и без использования JavaScript'а. "Побродил" по интернету, много вариантов нашел, но все мне не подходили, либо JavaScript используется, либо много кода... Нашел один более-менее подходящий вариант, код меня устроил, прекрасно работает, но содержимое вкладки выходило за границу блока родителя, такое смотрится некрасиво.

По аналогии я написал код. Вкладки открываются в пределах родителя, на крайней случай страница растягивается.
Сам код:

/* Вкладки */
.tabs {
    display: none;
}

.tab {
    display: none;
}

.tabs:target+.tab {
    display: block;    
}
/* END Вкладки */

<a href="#tab1">Tab 1</a>
<a href="#tab2">Tab 2</a>
<a href="#tab3">Tab 3</a>

<a class="tabs" id="tab1"></a>
<div class="tab">
    <!-- Контент первой вкладки -->
</div>

<a class="tabs" id="tab2"></a>
<div class="tab">
    <!-- Контент второй вкладки -->
</div>

<a class="tabs" id="tab3"></a>
<div class="tab">
    <!-- Контент третьей вкладки -->
</div>

Как видите кода совсем немного. Удобно использовать.
Спасибо за внимание.

Жалоба