9:12 29.08.2017
Недавно мне потребовалось сделать вкладки на одной странице, без перезагрузки и без использования 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>
Как видите кода совсем немного. Удобно использовать.
Спасибо за внимание.
- Жалоба