Вкладки (табы) на чистом CSS

Обнаружил в интернете очень простой способ создания табов (сменяющих друг друга блоков с контентом). Обычно подобные вещи делаются с помощью javascript, либо сейчас еще экспериментируют с CSS3. Данный пример обходится без этого.

HTML

<ul class="tabs">
	<li><a href="#one">1</a></li>
	<li><a href="#two">2</a></li>
	<li><a href="#three">3</a></li>
	<li><a href="#four">4</a></li>
	<li><a href="#five">5</a></li>
</ul>
<div class="tabs-content">
<ul>
	<li id="one">Содержимое 1-й вкладки</li>
	<li id="two">Содержимое 2-й вкладки</li>
	<li id="three">Содержимое 3-й вкладки</li>
	<li id="four">Содержимое 4-й вкладки</li>
	<li id="five">Содержимое 5-й вкладки</li>
</ul>
</div>

CSS

.tabs-content {
    width:960px;
    height:300px;
    overflow:hidden;
}
.tabs-content ul {
    list-style: none
    /* Эти 3 линии для Opera */
    height: 320px;
    overflow: scroll;
    overflow-y: hidden;
}
.tabs-content ul li {
    width:960px;
    height:300px;
}

Ссылки в навигации указывают на соответствующие id блоков с контентом. Этим блокам указаны ширина и высота равные блоку tabs-content. По умолчанию, при нажатии, браузер ищет в контенте блок с id указанным в ссылке. А т.к. отображаться может какой-либо один блок, это заставляет показывать актуальный.

Работает в Firefox, Opera (для старых версий нужно немного дополнить css), Safari, Google Chrome, IE6+.

Живой пример

0

У Криса Койера также есть свои варианты CSS табов

Ссылки

Источник: https://www.kobzarev.com/makeup/tabs-in-pure-css/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: