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

Внедряем CSS в HTML. JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2028
Поблагодарили: 62 раза

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

Сообщение Slash » Ср окт 21, 2015 10:35 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>

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

Спасибо за внимание.
Реклама

Вернуться в «HTML + CSS»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость