Tabs (табы) | CSS

CSS Tabs с переходом по клику

<style> .korpus > div, .korpus > input { display: none; } .korpus label { padding: 5px; border: 1px solid #aaa; line-height: 28px; cursor: pointer; position: relative; bottom: 1px; background: #fff; } .korpus input[type="radio"]:checked + label { border-bottom: 2px solid #fff; } .korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1), .korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2), .korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3) { display: block; padding: 5px; border: 1px solid #aaa; } </style>
<div class="korpus"> <input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1">CSS</label><input type="radio" name="odin" id="vkl2"/><label for="vkl2">HTML</label><input type="radio" name="odin" id="vkl3"/><label for="vkl3">Дополнительно</label> <div>первая вкладка</div> <div>вторая вкладка</div> <div>третья вкладка</div> </div>
Этот же метод применяется и при показать/скрыть блок div по клику.
<style> .korpus0 { position: relative; } .korpus0 > div, .korpus0 > input { display: none; min-height: 150px; /* 50px × 3 вкладки */ } .korpus0 label { position: absolute; right: 0; top: 0; width: 50px; height: 50px; border: 1px solid #aaa; line-height: 50px; text-align: center; cursor: pointer; } .korpus0 label:nth-of-type(2) { top: 51px; /* 50px + 1px border */ } .korpus0 label:nth-of-type(3) { top: 102px; /* 50px + 1px border первой вкладки + 1px border второй вкладки */ } .korpus0 input[type="radio"]:checked + label { border-left: 1px solid #fff; } .korpus0 > input:nth-of-type(1):checked ~ div:nth-of-type(1), .korpus0 > input:nth-of-type(2):checked ~ div:nth-of-type(2), .korpus0 > input:nth-of-type(3):checked ~ div:nth-of-type(3) { display: block; padding: 1px 55px 1px 5px; border: 1px solid #aaa; } </style>
<div class="korpus0"> <input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1">CSS</label><input type="radio" name="odin" id="vkl2"/><label for="vkl2">HTML</label><input type="radio" name="odin" id="vkl3"/><label for="vkl3">Доп</label> <div>первая вкладка</div> <div>вторая вкладка</div> <div>третья вкладка</div> </div>
тот же принцип, что и сверху

CSS Tabs, с переходом по щелчку

CSS табы с переходом по наведению курсора мышки. Результат изменения сохраняется

Если :hover заменить на :active, то будет самый чистый HTML код табов, где смена содержимого осуществляется нажатием на вкладку.

CSSHTMLДополнительноДополнительно
<style> .korpus1 { position: relative; height: 250px; } .korpus1 > span { display: inline-block; width: 20%; line-height: 28px; height: 28px; border: 1px solid #aaa; border-bottom: none; text-align: center; cursor: pointer; } .korpus1 > div { position: absolute; height: 209px; height: calc(250px - 28px - 1px - 10px - 2px); width: 100%; width: calc(100% - 10px - 2px); padding: 5px; border: 1px solid #aaa; background: #fff; } .korpus1 > div:nth-of-type(n+2) { visibility: collapse; -webkit-transition: 999999s; transition: 999999s; } .korpus1 > span + span:hover + span + span ~ div:nth-of-type(2), .korpus1 > span + span + span:hover + span ~ div:nth-of-type(3), .korpus1 > span + span + span + span:hover ~ div:nth-of-type(4) { visibility: visible; -webkit-transition: .01s; transition: .01s; } .korpus1 > span:hover + span + span + span ~ div:nth-of-type(2), .korpus1 > span:hover + span + span + span ~ div:nth-of-type(3), .korpus1 > span:hover + span + span + span ~ div:nth-of-type(4), .korpus1 > span + span:hover + span + span ~ div:nth-of-type(3), .korpus1 > span + span:hover + span + span ~ div:nth-of-type(4), .korpus1 > span + span + span:hover + span ~ div:nth-of-type(2), .korpus1 > span + span + span:hover + span ~ div:nth-of-type(4), .korpus1 > span + span + span + span:hover ~ div:nth-of-type(2), .korpus1 > span + span + span + span:hover ~ div:nth-of-type(3) { visibility: hidden; -webkit-transition: .01s; transition: .01s; } .korpus1 > div:hover { visibility: visible; } .korpus1 > div:before { border-top: 2px solid #fff; content: ""; position: absolute; left: 0; top: -2px; width: 20%; } .korpus1 > div:nth-of-type(2):before { left: 20%; left: calc(20% + 3px); } .korpus1 > div:nth-of-type(3):before { left: 40%; left: calc(40% + 5px); } .korpus1 > div:nth-of-type(4):before { left: 60%; left: calc(60% + 7px); } </style>
<div class="korpus1"> <span>CSS</span><span>HTML</span><span>Дополнительно</span><span>Дополнительно</span> <div>первая вкладка</div> <div>вторая вкладка</div> <div>третья вкладка</div> <div>четвёртая вкладка</div> </div>
Этот же метод применяется и во втором примере прокрутки CSS.
Данные отсутствуют

Реализация попроще

CSS
<style>
#raz { /* корпус */ 
  position: relative;
  height: 250px;
  border-top: 30px solid #fff;
}
#raz > div { /* вкладка */ 
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  visibility: collapse;
  transition: 0s 9999999s;
  box-sizing: border-box;
  background: #fff;
  padding: 5px;
}
#raz > div:before { /* рамка вкладки */ 
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: #808080 solid 1px;
  border-top: none;
}
#raz > div:hover, #raz > div:nth-of-type(1) {
  visibility: visible;
  transition: 0s;
}
#raz:hover > div:not(:hover) {
  visibility: hidden;
  transition: 0s;
}
#raz > div > span { /* кнопка */ 
  position: absolute;
  top: -30px;
  line-height: 30px;
  height: 30px;
  width: 25%; /* 4 вкладки, а значит 100/4 */ 
  text-align: center;
  box-sizing: border-box;
  border: 1px solid rgb(128,128,128);
  border-left-color: rgba(0,0,0,0);
  visibility: visible;
  transition: 0s 9999999s;
  cursor: pointer;
}
#raz > div:nth-of-type(1) > span {left: 0; border-left-color: rgb(128,128,128);}
#raz > div:nth-of-type(2) > span {left: 25%;}
#raz > div:nth-of-type(3) > span {left: 50%;}
#raz > div:nth-of-type(4) > span {left: 75%;}
#raz > div:hover > span, #raz > div:nth-of-type(1) > span {
  border-bottom-color: rgba(0,0,0,0);
  transition:  0s;
}
#raz:hover > div:not(:hover) > span {
  border-bottom-color: rgba(128,128,128,.99);
  transition:  0s;
}
#raz > div:not(:nth-of-type(1)):not(:hover):after { /* появляется нижняя граница у первой кнопки */ 
  content: "";
  left: 0;
  position: absolute;
  top: -1px;
  width: 25%;
  border-top: 1px solid rgb(128,128,128);
}
</style>
HTML
<div id="raz">
  <div><span>CSS</span>1 вкладка</div>
  <div><span>HTML</span>2 вкладка</div>
  <div><span>Дополнительно</span>3 вкладка</div>
  <div><span>Дополнительно</span>4 вкладка</div>
</div>
Дополнительно3 вкладка
Дополнительно4 вкладка

Меню вкладками, где смена блоков происходит при наведении мышки. Появляющееся поле не фиксируется и как только курсор уходит с формы, снова видимой становится первая часть

Для копирования текста используйте комбинацию клавиш CTRL+C.

  1. <style> .korpus2 { position: relative; height: 250px; margin: 0; padding: 29px 0 0 0; padding: calc(28px + 1px) 0 0 0; } .korpus2 li, .korpus2 li:after { position: absolute; border: 1px solid #aaa; background: #fff; } .korpus2 li { width: 100%; height: 240px; height: calc(250px - 10px); list-style: none; padding: 5px; } .korpus2 li:after { content: attr(data-tab); left: -1px; top: -30px; top: calc(-28px - 2px); width: 20%; line-height: 28px; text-align: center; cursor: pointer;} .korpus2 li:nth-of-type(2):after { left: 20%; } .korpus2 li:nth-of-type(3):after { left: 40%; } .korpus2 li:hover:after, .korpus2 li:nth-of-type(1):after { border-bottom: 2px solid #fff; } .korpus2 li:after, .korpus2 li:hover, .korpus2 li:nth-of-type(1) { z-index: 1; } </style>
  2. <ol class="korpus2"> <li data-tab="CSS">первая вкладка <li data-tab="HTML">вторая вкладка <li data-tab="Дополнительно">третья вкладка </ol>
  3. Этот же метод применяется и в случае если картинка меняется при наведении на неё.

Меню вкладками, где поле изначально скрыто. Появляется или при наведении, или по клику. Если щелкнуть вне меню, то оно свернётся.

  1. CSS
    <style> .korpus3 { position: relative; z-index: 1; } .korpus3, .korpus3 li { margin: 0; padding: 0; } .korpus3 li { display: inline-block; border: 1px solid #aaa; padding: 5px 10px; cursor: pointer; } .korpus3 li div, .korpus3:hover li:not(:hover) div { position: absolute; top: 100%; left: 0; width: 100%; box-sizing: border-box; margin-top: -1px; border: 1px solid #aaa; background: #fff; cursor: default; visibility: hidden; } .korpus3 li:hover div, .korpus3 li:focus div { visibility: visible; } .korpus3 li:hover { background: #f1f1f1; } .korpus3 li:focus { background: #aaa; } </style>
  2. HTML
    <ol class="korpus3"> <li tabindex="0">CSS<div>первая вкладка</div> <li tabindex="0">HTML<div>вторая вкладка</div> <li tabindex="0">Дополнительно<div>третья вкладка</div> </ol>
  3. Дополнительно
    Тот же приём с tabindex, который использован при создании адаптивного меню и всплывающей подсказки
в f t
наверх ↑

165 комментариев:

Анонимный
css tabs, где переход происходит при наведении курсора на кнопку
- как сделать, чтобы выбранная вкладка не пропадала, а оставалась открытой?
NMitra
Только с помощью скриптов. Тут действуют псевдоклассы - http://shpargalkablog.ru/2012/02/psevdoklassy-css.html
Анонимный
Спасибо!
NMitra
Приходите ещё))
Евгений
отличные варианты... помогли
Анонимный
css tabs с переходом по клику
попробовал использовать на страницах в joomle - не получилось
потом тупо вставил в дримвивер, переход по вкладкам не происходит (вкладки переключаются, но содержимое не меняется)
NMitra
Код построен по тому же принципу http://shpargalkablog.ru/2010/11/poyavlyayushchiesya-commentarii.html

Протестировала, всё работает, даже в Опера.Мини.
RusyLev
Очень интересный обзор, на некоторых своих сайтах именно ваши табы и использую.

Но возник вопрос, как можно модифицировать 1-ый пример табов, чтобы сами табы были слева?

Пример: https://dl.dropboxusercontent.com/u/1104627/articles/CSS/vertical_tabs/index.html
RusyLev
или как здесь http://www.slotvoyager.com/list/videopokers/games/videopokerama
NMitra
Дополнила статью ещё одним примером
Rusylev
Браво! Огромное спасибо!
Rusylev
поставил на сайт, попытался вставить изображения в табы, но что-то ничего не выходит толкового. Невозможно настроить отступ снизу от картинок, они налазят друг на друга.

Вот пример http://casino-oboz.ru/igrovye-avtomaty/1-igrovoi-avtomat-aquatica.html
Rusylev
Вроде решаю вопрос =) Единственное ,что может быть неправильным ,так это верстка =)
NMitra
Уберите border и padding: 1px 55px 1px 5px; замените на padding-right: 55px;
Saiidr
Спасибо,огромное =)
NMitra
Рада помочь :)
Анонимный
Отличный блог(автору+1), отличный пост, отличная реализация и всё бы хорошо если бы не проблема с кроссбраузерностью. Проверял только передпоследний вариант
——
CSS табы с переходом по
наведению курсора мышки.
Результат изменения
сохраняется.
——
Суть проблемы: в том виде, в каком вариант представлен на сайте, проблем нет, но только мне понадобилось увеличить высоту рамки height: 250px (встречается в двух местах, заменил на 380px) началась канетель. Почти во всех браузерах, высота 380px отображается как изначально в примере -250px, получаться что конец рамки на четверть текста блока.

В хроме (в мозиле рамка чуть меньше, чем в хроме. Хорошо), всё отлично, к большому удивления в Яндекс браузере рамка на четверть текста, в ИЕ и в Опере тоже самое, а вот в Опере-мини отображает коректно.


Сначала винил изображения, они присутствуют, после урал всё, оставил только голый текст и поменял значения высоты (380px, в двух местах, согласно инструкции) проблема не решилась.

Подскажите пожалуйста, как это решить?

ЯПлакать.
Анонимный
Забыл представиться, Михаил.
NMitra
height: 209px; заменить на height: 339px;
Анонимный
NMitra, вы прелесть и 41 раз умница! Большое Вам спасибо
Михаил
Анонимный
Здравствуйте. Подскажите пожалуйста, как в четвёртом примере добавить ещё span (колонки). У меня нарушается порядок их перехода или не работает вовсе.
Спасибо.
NMitra
Здравствуйте

<style>
.korpus1 { position: relative; height: 250px; }
.korpus1 > span { display: inline-block; width: 20%; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 28px; height: 28px; border: 1px solid #aaa; border-bottom: none; text-align: center; cursor: pointer; }
.korpus1 > div { position: absolute; height: 209px; height: calc(250px - 28px - 1px - 10px - 2px); width: 100%; width: calc(100% - 10px - 2px); padding: 5px; border: 1px solid #aaa; background: #fff; }
.korpus1 > div:nth-of-type(n+2) { visibility: collapse; transition: 999999s; }

.korpus1 > span + span:hover + span + span + span ~ div:nth-of-type(2),
.korpus1 > span + span + span:hover + span + span ~ div:nth-of-type(3),
.korpus1 > span + span + span + span:hover + span ~ div:nth-of-type(4),
.korpus1 > span + span + span + span + span:hover ~ div:nth-of-type(5) { visibility: visible; transition: .01s; }

.korpus1 > span:hover + span + span + span + span ~ div:nth-of-type(2),
.korpus1 > span:hover + span + span + span + span ~ div:nth-of-type(3),
.korpus1 > span:hover + span + span + span + span ~ div:nth-of-type(4),
.korpus1 > span:hover + span + span + span + span ~ div:nth-of-type(5),

.korpus1 > span + span:hover + span + span + span ~ div:nth-of-type(3),
.korpus1 > span + span:hover + span + span + span ~ div:nth-of-type(4),
.korpus1 > span + span:hover + span + span + span ~ div:nth-of-type(5),

.korpus1 > span + span + span:hover + span + span ~ div:nth-of-type(2),
.korpus1 > span + span + span:hover + span + span ~ div:nth-of-type(4),
.korpus1 > span + span + span:hover + span + span ~ div:nth-of-type(5),

.korpus1 > span + span + span + span:hover + span ~ div:nth-of-type(2),
.korpus1 > span + span + span + span:hover + span ~ div:nth-of-type(3),
.korpus1 > span + span + span + span:hover + span ~ div:nth-of-type(5),

.korpus1 > span + span + span + span + span:hover ~ div:nth-of-type(2),
.korpus1 > span + span + span + span + span:hover ~ div:nth-of-type(3),
.korpus1 > span + span + span + span + span:hover ~ div:nth-of-type(4) { visibility: hidden; transition: .01s; }

.korpus1 > div:hover { visibility: visible; }

.korpus1 > div:before { border-top: 2px solid #fff; content: ""; position: absolute; left: 0; top: -2px; width: 20%; }
.korpus1 > div:nth-of-type(2):before { left: 20%; }
.korpus1 > div:nth-of-type(3):before { left: 40%; }
.korpus1 > div:nth-of-type(4):before { left: 60%; }
.korpus1 > div:nth-of-type(5):before { left: 80%; }
</style>

<div class="korpus1"> <span>раз</span><span>два</span><span>три</span><span>четыре</span><span>пять</span> <div>первая вкладка</div> <div>вторая вкладка</div> <div>третья вкладка</div> <div>четвёртая вкладка</div> <div>пятая вкладка</div> </div>
Анонимный
Благодарю.
ornyse.ru
Скажите а как сделать чтобы (CSS табы с переходом по наведению курсора мышки. Результат изменения сохраняется.) отображался на странице во всю ширину и длинну страницы? А то добавляешь например картинку а она со скролом , а когда переходишь на вкладку другую, картинку с другой вкладки видно, тоесть она торчит снизу обрезанная?
NMitra
"во всю ширину и длину страницы" - она и так во всю ширину.
во всю высоту я попробую один вариант. Чтобы не было видно хвоста

.korpus1 > div { overflow: auto; }
NMitra
Вариант оказался неудачным - всё упирается в поддержку transition. Нет height: auto или position. См. http://dev.w3.org/csswg/css-transitions/#properties-from-css-
Анонимный
У меня вопрос(или предложение по улучшению) по первым двум, остальные я не использовал. Зачем задавать padding и border в селекторе .korpus0 > input:nth-of-type(1):checked ~ div:nth-of-type(1) и т.д., когда его можно задать в селекторе .korpus0 > div. Ведь основной смысл данного селектора именно display: block;, остальное логичнее задать отдельно.
NMitra
И так и так можно. Лучше тот вариант, который более быстрый, вот только никто подобных исследований не проводил. Или тот, с которым удобнее работать. Я бы тоже предпочла ваш, если бы стиль нужно было бы сделать сложнее.
Billy
Очень классно, но как, например, в первом примере задать фон для всей строчки с табами, а не отдельным элементам? Пробовал задать общий span для них, но все перестает работать. Как сделать на css такой же таб (http://www.t.ks.ua/banknota-s-simvolikoy-es-poyavitsya-i-v-hersone)? Там применяется jqeury.
NMitra
Примитивный вариант, но суть ясна. Добавьте к уже имеющемуся CSS

.korpus {background: red;}
.korpus label {background: red;}
.korpus input[type="radio"]:checked + label {background: #fff;}
.korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3) {background: #fff;}
Анонимный
Спасибо за материал.
NMitra
Рада помочь.
zloe-aloe
спасибо, отличная штука!

не подскажете, почему не получается 4-й вариант сделать с 6-ю вкладками?


< style>
.korpus1 { position: relative; height: 250px; }
.korpus1 > span { display: inline-block; width: 16%; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 28px; height: 28px; border: 1px solid #aaa; border-bottom: none; text-align: center; cursor: pointer; }
.korpus1 > div { position: absolute; height: 209px; height: calc(250px - 28px - 1px - 10px - 2px); width: 100%; width: calc(100% - 10px - 2px); padding: 5px; border: 1px solid #aaa; background: #fff; }

.korpus1 > div:nth-of-type(n+2) { visibility: collapse; transition: 999999s; }

.korpus1 > span + span:hover + span + span + span + span ~ div:nth-of-type(2),
.korpus1 > span + span + span:hover + span + span + span ~ div:nth-of-type(3),
.korpus1 > span + span + span + span:hover + span + span ~ div:nth-of-type(4),
.korpus1 > span + span + span + span + span:hover + span ~ div:nth-of-type(5),
.korpus1 > span + span + span + span + span + span:hover ~ div:nth-of-type(6),
{ visibility: visible; transition: .01s; }

.korpus1 > span:hover + span + span + span + span + span ~ div:nth-of-type(2),
.korpus1 > span:hover + span + span + span + span + span ~ div:nth-of-type(3),
.korpus1 > span:hover + span + span + span + span + span ~ div:nth-of-type(4),
.korpus1 > span:hover + span + span + span + span + span ~ div:nth-of-type(5),
.korpus1 > span:hover + span + span + span + span + span ~ div:nth-of-type(6),

.korpus1 > span + span:hover + span + span + span + span ~ div:nth-of-type(3),
.korpus1 > span + span:hover + span + span + span + span ~ div:nth-of-type(4),
.korpus1 > span + span:hover + span + span + span + span ~ div:nth-of-type(5),
.korpus1 > span + span:hover + span + span + span + span ~ div:nth-of-type(6),

.korpus1 > span + span + span:hover + span + span + span ~ div:nth-of-type(2),
.korpus1 > span + span + span:hover + span + span + span ~ div:nth-of-type(4),
.korpus1 > span + span + span:hover + span + span + span ~ div:nth-of-type(5),
.korpus1 > span + span + span:hover + span + span + span ~ div:nth-of-type(6),

.korpus1 > span + span + span + span:hover + span + span ~ div:nth-of-type(2),
.korpus1 > span + span + span + span:hover + span + span ~ div:nth-of-type(3),
.korpus1 > span + span + span + span:hover + span + span ~ div:nth-of-type(5),
.korpus1 > span + span + span + span:hover + span + span ~ div:nth-of-type(6),

.korpus1 > span + span + span + span + span:hover + span ~ div:nth-of-type(2),
.korpus1 > span + span + span + span + span:hover + span ~ div:nth-of-type(3),
.korpus1 > span + span + span + span + span:hover + span ~ div:nth-of-type(4),
.korpus1 > span + span + span + span + span:hover + span ~ div:nth-of-type(6),

.korpus1 > span + span + span + span + span + span:hover ~ div:nth-of-type(2),
.korpus1 > span + span + span + span + span + span:hover ~ div:nth-of-type(3),
.korpus1 > span + span + span + span + span + span:hover ~ div:nth-of-type(4),
.korpus1 > span + span + span + span + span + span:hover ~ div:nth-of-type(5),
{ visibility: hidden; transition: .01s; }

.korpus1 > div:hover { visibility: visible; }

.korpus1 > div:before { border-top: 2px solid #fff; content: ""; position: absolute; left: 0; top: -2px; width: 16%; }
.korpus1 > div:nth-of-type(2):before { left: 16%; }
.korpus1 > div:nth-of-type(3):before { left: 32%; }
.korpus1 > div:nth-of-type(4):before { left: 48%; }
.korpus1 > div:nth-of-type(5):before { left: 60%; }
.korpus1 > div:nth-of-type(6):before { left: 76%; }
< /style>



NMitra
Рабочий вариант:

<div class="korpus1"> <span>Раз</span><span>Два</span><span>Три</span><span>Четыре</span><span>Пять</span><span>Шесть</span> <div>первая вкладка</div> <div>вторая вкладка</div> <div>третья вкладка</div> <div>четвёртая вкладка</div> <div>пятая вкладка</div> <div>шестая вкладка</div> </div>
NMitra
<style>
.korpus1 { position: relative; height: 250px; }

.korpus1 > span { display: inline-block; width: calc(100%/6 - 1px*2); line-height: 28px; height: 28px; border: 1px solid #aaa; border-bottom: none; text-align: center; cursor: pointer; }

.korpus1 > div { position: absolute; height: calc(250px - 28px - 1px - 10px - 2px); width: calc(100% - 10px - 2px); padding: 5px; border: 1px solid #aaa; background: #fff; }
.korpus1 > div:nth-of-type(n+2) { visibility: collapse; -webkit-transition: 999999s; transition: 999999s; }
.korpus1 > span + span:hover + span + span + span + span ~ div:nth-of-type(2),
.korpus1 > span + span + span:hover + span + span + span ~ div:nth-of-type(3),
.korpus1 > span + span + span + span:hover + span + span ~ div:nth-of-type(4),
.korpus1 > span + span + span + span + span:hover + span ~ div:nth-of-type(5),
.korpus1 > span + span + span + span + span + span:hover ~ div:nth-of-type(6) { visibility: visible; -webkit-transition: .01s; transition: .01s; }
.korpus1 > span:hover + span + span + span + span + span ~ div:nth-of-type(2),
.korpus1 > span:hover + span + span + span + span + span ~ div:nth-of-type(3),
.korpus1 > span:hover + span + span + span + span + span ~ div:nth-of-type(4),
.korpus1 > span:hover + span + span + span + span + span ~ div:nth-of-type(5),
.korpus1 > span:hover + span + span + span + span + span ~ div:nth-of-type(6),
.korpus1 > span + span:hover + span + span + span + span ~ div:nth-of-type(3),
.korpus1 > span + span:hover + span + span + span + span ~ div:nth-of-type(4),
.korpus1 > span + span:hover + span + span + span + span ~ div:nth-of-type(5),
.korpus1 > span + span:hover + span + span + span + span ~ div:nth-of-type(6),
.korpus1 > span + span + span:hover + span + span + span ~ div:nth-of-type(2),
.korpus1 > span + span + span:hover + span + span + span ~ div:nth-of-type(4),
.korpus1 > span + span + span:hover + span + span + span ~ div:nth-of-type(5),
.korpus1 > span + span + span:hover + span + span + span ~ div:nth-of-type(6),
.korpus1 > span + span + span + span:hover + span + span ~ div:nth-of-type(2),
.korpus1 > span + span + span + span:hover + span + span ~ div:nth-of-type(3),
.korpus1 > span + span + span + span:hover + span + span ~ div:nth-of-type(5),
.korpus1 > span + span + span + span:hover + span + span ~ div:nth-of-type(6),
.korpus1 > span + span + span + span + span:hover + span ~ div:nth-of-type(2),
.korpus1 > span + span + span + span + span:hover + span ~ div:nth-of-type(3),
.korpus1 > span + span + span + span + span:hover + span ~ div:nth-of-type(4),
.korpus1 > span + span + span + span + span:hover + span ~ div:nth-of-type(6),
.korpus1 > span + span + span + span + span + span:hover ~ div:nth-of-type(2),
.korpus1 > span + span + span + span + span + span:hover ~ div:nth-of-type(3),
.korpus1 > span + span + span + span + span + span:hover ~ div:nth-of-type(4),
.korpus1 > span + span + span + span + span + span:hover ~ div:nth-of-type(5) { visibility: hidden; -webkit-transition: .01s; transition: .01s; }
.korpus1 > div:hover { visibility: visible; }

.korpus1 > div:before { border-top: 2px solid #fff; content: ""; position: absolute; left: 0; top: -2px; width: calc(100%/6 - 1px); }
.korpus1 > div:nth-of-type(2):before { left: calc(100%/6 + 1px); }
.korpus1 > div:nth-of-type(3):before { left: calc(100%/6*2 + 1px); }
.korpus1 > div:nth-of-type(4):before { left: calc(100%/6*3 + 1px); }
.korpus1 > div:nth-of-type(5):before { left: calc(100%/6*4 + 1px); }
.korpus1 > div:nth-of-type(6):before { left: calc(100%/6*5 + 1px); }
</style>
zloe-aloe
спасибо большое!
Денис Демин
Здраствуйте, уважаемый автор ! Сначала хотелось бы поблагодарить за очень полезную статью и попросить помощи. Мне нужно сделать так : Вариант №1 идет как основной, а в третьей вкладке должен находиться вариант №2. Подскажите пожалуйста, как это реализовать ! ?

Заранее благодарю за внимание.
Денис Демин
жду ответа. Еще раз спасибо. :-)
NMitra
Здравствуйте, так и размещайте :-)
Александра Помойницкая
Добрый день! Подскажите, пожалуйста, как сделать, чтобы в примере номер 1 при загрузке, верхней была вторая вкладка, а не первая. В вашем примере сейчас CSS верхняя, а как сделать, чтобы HTML была верхней? Спасибо!
NMitra
Добрый день. checked="checked" нужно убрать из
<input type="radio" name="odin" checked="checked" id="vkl1"/>
и поставить в
<input type="radio" name="odin" id="vkl2"/>
Александра Помойницкая
Спасибо огромнейшее!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
maritca
Добрый день, не работает в ИЕ и Сафари... вкладки просто не переключаются.
NMitra
Добрый день. Все последние версии браузеров поддерживают. Проблема может быть у старых версий, не поддерживающих селекторы.
MarQs Li
Потрясающе!
Поломал немного голову над четвертым вар. с семью вкладками, но оно того стоило, автор логику изложил отлично.
СПАСИБО!
Анонимный
не работает первый пример в IE 6 как можно сделать чтобы заработало?
NMitra
Увы, это невозможно. В IE6 подобные вещи делаются только с участием JavaScript
Анонимный
а не подскажите какой скрипт нужно вставить для корректной работы? Заранее благодарен
Анонимный
а не подскажите какой скрипт нужно вставить для корректной работы? Заранее благодарен
NMitra
Что-то типа такого http://shpargalkablog.ru/2011/01/forma-s-vkladkami.html Хотя в IE не проверяла
Анонимный
а куда прописывается этот скрипт для примера 1? :)
NMitra
Лучше измените CSS этого http://shpargalkablog.ru/2011/01/forma-s-vkladkami.html
Анонимный
дело в том что сверстано уже не одна страница по примеру один и нужно как-то исправить этот БАГ :(
NMitra
Подумаю
NMitra
Противный IE6, там вроде нужно будет всем прописывать id. Пробуйте:

<style>
.korpus > div, .korpus > input { display: none; }
.korpus label { padding: 5px; border: 1px solid #aaa; line-height: 28px; cursor: pointer; position: relative; bottom: 1px; background: #fff; }
.korpus input[type="radio"]:checked + label { border-bottom: 2px solid #fff; }
.korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3) { display: block; padding: 5px; border: 1px solid #aaa; }
.korpus .vid { display: block; padding: 5px; border: 1px solid #aaa; }
.korpus .skryt { display: none; }
</style>

<div class="korpus">
<input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1" onclick="vkladki('HTML');">CSS</label><input type="radio" name="odin" id="vkl2"/><label for="vkl2" onclick="vkladki('CSS');">HTML</label><input type="radio" name="odin" id="vkl3" onclick="vkladki('script');"/><label for="vkl3">Дополнительно</label>
<div id="HTML" class="vid">1</div>
<div id="CSS" class="skryt">2</div>
<div id="script" class="skryt">3</div>
</div>

<script>
var abv = "HTML";
function vkladki(x) {
var mostrar = document.getElementById(x);
var actual = document.getElementById(abv);
actual.className="skryt";
mostrar.className="vid";
abv = x;
}
</script>
Анонимный
Прошу прощения за мою наглость и за чайничество :) Вот к примеру страничка http://compol.ru/linoleum/travertine.php куда тут нужно дописать этот скрипт?) везде нормально показывает а на 6 версии как и описал выше не корректно
NMitra
Сначала попробуйте после <div class="korpus">...</div>
Если будет работать (я не проверяла), то скрипт уберёте в конец body
maritca
NMitra, никак не могу додумать... Мне нравится ваш третий вариант тем, что окно, если оно со скроллом, не скачет при переключении вкладок, но я не могу понять, что нужно изменить, чтобы вкладки менялись всё-таки при клике, а не по наведению. И можно ли не задавать высоту дивов, а сделать так, чтобы высота определялась для каждой вкладки автоматически? Я так попробовала, но у меня остаётся видимой часть дива с наибольшей высотой. Либо как изменить первый вариант так, чтобы окно не "прыгало"... Или это невозможно со свободной высотой дивов?
NMitra
Окно не будет прыгать если будет задана фиксированная высота у вкладок. Высота вкладки меняется и она смещает вниз остальной контент. Можно сделать что-то типа всплывающего меню. Когда все вкладки сначала скрыты, а при нажатии на пункт меню появляются над контентом. Посмотрите как у Сбербанка сделано меню "Взять кредит", "Выбрать карту", "Накопить и сохранить", ...
Анонимный
Здравствуйте. А можно ли поместить таб внутри таба? Пробовала на первом примере, не получилось.
Анонимный
NMitra, а у меня ИЕ 11 почему-то не поддерживает... Это же не старый браузер. Что-нибудь можно сделать?
NMitra
Здравствуйте, id должен быть индивидуальным, name должен быть индивидуальным каждого таба. То есть вот так:

<div class="korpus">
<input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1">Раз</label><input type="radio" name="odin" id="vkl2"/><label for="vkl2">Два</label><input type="radio" name="odin" id="vkl3"/><label for="vkl3">Три</label>
<div>
<div class="korpus">
<input type="radio" name="odin1" checked="checked" id="vkl11"/><label for="vkl11">Раз 1</label><input type="radio" name="odin1" id="vkl12"/><label for="vkl12">Раз 2</label><input type="radio" name="odin1" id="vkl13"/><label for="vkl13">Раз 3</label>
<div>первая внутренняя вкладка</div>
<div>вторая внутренняя вкладка</div>
<div>третья внутренняя вкладка</div>
</div>
</div>
<div>вторая вкладка</div>
<div>третья вкладка</div>
</div>
NMitra
Я ещё раз проверила на IE, всё работает. У вас не работают примеры именно с моей страницы или когда вы добавляете их на свой сайт? Используете Windows?
Александра Помойницкая
Добрый вечер! Подскажите пожалуйста как сделать первый вариант с 9-ью вкладками.

.tab-block > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.tab-block > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.tab-block > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.tab-block > input:nth-of-type(4):checked ~ div:nth-of-type(4),
.tab-block > input:nth-of-type(5):checked ~ div:nth-of-type(5),
.tab-block > input:nth-of-type(6):checked ~ div:nth-of-type(6),
.tab-block > input:nth-of-type(7):checked ~ div:nth-of-type(7),
.tab-block > input:nth-of-type(8):checked ~ div:nth-of-type(8),
.tab-block > input:nth-of-type(9):checked ~ div:nth-of-type(9){

так прописала и ничего не работает..просто все 9 дивов в столбик выстроились.

Подскажите пожалуйста как прописать. Спасибо!!!
NMitra
<style>
.korpus > div, .korpus > input { display: none; }

.korpus label { padding: 5px; border: 1px solid #aaa; line-height: 28px; cursor: pointer; position: relative; bottom: 1px; background: #fff; }
.korpus input[type="radio"]:checked + label { border-bottom: 2px solid #fff; }

.korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.korpus > input:nth-of-type(4):checked ~ div:nth-of-type(4),
.korpus > input:nth-of-type(5):checked ~ div:nth-of-type(5),
.korpus > input:nth-of-type(6):checked ~ div:nth-of-type(6),
.korpus > input:nth-of-type(7):checked ~ div:nth-of-type(7),
.korpus > input:nth-of-type(8):checked ~ div:nth-of-type(8),
.korpus > input:nth-of-type(9):checked ~ div:nth-of-type(9) { display: block; padding: 5px; border: 1px solid #aaa; }
</style>

<div class="korpus">
<input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1">Раз</label><input type="radio" name="odin" id="vkl2"/><label for="vkl2">Два</label><input type="radio" name="odin" id="vkl3"/><label for="vkl3">Три</label><input type="radio" name="odin" id="vkl4"/><label for="vkl4">Четыре</label><input type="radio" name="odin" id="vkl5"/><label for="vkl5">Пять</label><input type="radio" name="odin" id="vkl6"/><label for="vkl6">Шесть</label><input type="radio" name="odin" id="vkl7"/><label for="vkl7">Семь</label><input type="radio" name="odin" id="vkl8"/><label for="vkl8">Восемь</label><input type="radio" name="odin" id="vkl9"/><label for="vkl9">Девять</label>
<div>вкладка1</div>
<div>вкладка2</div>
<div>вкладка3</div>
<div>вкладка4</div>
<div>вкладка5</div>
<div>вкладка6</div>
<div>вкладка7</div>
<div>вкладка8</div>
<div>вкладка9</div>
</div>
Анонимный
а как сделать, чтобы не было двойных границ? некрасиво же...
NMitra
Регулируется bottom, например,
bottom: 1px;
замените на
bottom: 0px;
или более подходящее вам значение.
Exari Constantin
А как в первом варианте добавить еще 2 вкладки?
.korpus > div, .korpus > input { display: none; }

.korpus label { padding: 5px; border: 1px solid #aaa; line-height: 28px; cursor: pointer; position: relative; bottom: 1px; background: #fff; }
.korpus input[type="radio"]:checked + label { border-bottom: 2px solid #fff; }

.korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3) { display: block; padding: 5px; border: 1px solid #aaa; }
NMitra
См. комментарий 65
Денис
Здравствуйте, NMitra. Подскажите пожалуйста как сделать 3-й вариант с 25 вкладками, а то я уже 3-й день мучаюсь, всё никак не получается (
NMitra
<div id="raz">
<div>1 вкладка</div>
<div>2 вкладка</div>
<div>3 вкладка</div>
<div>4 вкладка</div>
<div>5 вкладка</div>
<div>6 вкладка</div>
<div>7 вкладка</div>
<div>8 вкладка</div>
<div>9 вкладка</div>
<div>10 вкладка</div>
<div>11 вкладка</div>
<div>12 вкладка</div>
<div>13 вкладка</div>
<div>14 вкладка</div>
<div>15 вкладка</div>
<div>16 вкладка</div>
<div>17 вкладка</div>
<div>18 вкладка</div>
<div>19 вкладка</div>
<div>20 вкладка</div>
<div>21 вкладка</div>
<div>22 вкладка</div>
<div>23 вкладка</div>
<div>24 вкладка</div>
<div>25 вкладка</div>
</div>

<style>
#raz {
position: relative;
height: 250px;
border-top: 30px solid #fff;
}
#raz > div {
position: absolute;
height: 100%;
width: 100%;
visibility: collapse;
transition: 0s 9999999s;
background-color: #fff;
background-image: linear-gradient(to left, #aaa 1px, transparent 1px), linear-gradient(to right, #aaa 1px, transparent 1px), linear-gradient(to top, #aaa 1px, transparent 1px);
}
#raz > div:hover, #raz > div:nth-of-type(1) {
visibility: visible;
transition: 0s;
}
#raz:hover > div:not(:hover) {
visibility: hidden;
transition: 0s;
}
#raz > div:before, #raz > div:after {
position: absolute;
top: -30px;
line-height: 30px;
height: 30px;
width: 4%;
text-align: center;
background: #808080;
cursor: pointer;
}
#raz > div:before {
visibility: visible;
transition: 0s 9999999s;
}
#raz > div:not(:nth-of-type(1)):hover:after {content: none;}
#raz > div:nth-of-type(1):before, #raz > div:not(:nth-of-type(1)):after {content: "1"; left: 0;}
#raz > div:nth-of-type(2):before {content: "2"; left: 4%;}
#raz > div:nth-of-type(3):before {content: "3"; left: 8%;}
#raz > div:nth-of-type(4):before {content: "4"; left: 12%;}
#raz > div:nth-of-type(5):before {content: "5"; left: 16%;}
#raz > div:nth-of-type(6):before {content: "6"; left: 20%;}
#raz > div:nth-of-type(7):before {content: "7"; left: 24%;}
#raz > div:nth-of-type(8):before {content: "8"; left: 28%;}
#raz > div:nth-of-type(9):before {content: "9"; left: 32%;}
#raz > div:nth-of-type(10):before {content: "10"; left: 36%;}
#raz > div:nth-of-type(11):before {content: "11"; left: 40%;}
#raz > div:nth-of-type(12):before {content: "12"; left: 44%;}
#raz > div:nth-of-type(13):before {content: "13"; left: 48%;}
#raz > div:nth-of-type(14):before {content: "14"; left: 52%;}
#raz > div:nth-of-type(15):before {content: "15"; left: 56%;}
#raz > div:nth-of-type(16):before {content: "16"; left: 60%;}
#raz > div:nth-of-type(17):before {content: "17"; left: 64%;}
#raz > div:nth-of-type(18):before {content: "18"; left: 68%;}
#raz > div:nth-of-type(19):before {content: "19"; left: 72%;}
#raz > div:nth-of-type(20):before {content: "20"; left: 76%;}
#raz > div:nth-of-type(21):before {content: "21"; left: 80%;}
#raz > div:nth-of-type(22):before {content: "22"; left: 84%;}
#raz > div:nth-of-type(23):before {content: "23"; left: 88%;}
#raz > div:nth-of-type(24):before {content: "24"; left: 92%;}
#raz > div:nth-of-type(25):before {content: "25"; left: 96%;}
#raz > div:hover:before, #raz > div:nth-of-type(1):before {
background: #e5e5e5;
transition: 0s;
}
#raz:hover > div:not(:hover):before {
background: #808081;
transition: 0s;
}
</style>
NMitra
Чтобы в IE работало

<div id="raz">
<div><span>1</span>1 вкладка</div>
<div><span>2</span>2 вкладка</div>
<div><span>3</span>3 вкладка</div>
<div><span>4</span>4 вкладка</div>
<div><span>5</span>5 вкладка</div>
<div><span>6</span>6 вкладка</div>
<div><span>7</span>7 вкладка</div>
<div><span>8</span>8 вкладка</div>
<div><span>9</span>9 вкладка</div>
<div><span>10</span>10 вкладка</div>
<div><span>11</span>11 вкладка</div>
<div><span>12</span>12 вкладка</div>
<div><span>13</span>13 вкладка</div>
<div><span>14</span>14 вкладка</div>
<div><span>15</span>15 вкладка</div>
<div><span>16</span>16 вкладка</div>
<div><span>17</span>17 вкладка</div>
<div><span>18</span>18 вкладка</div>
<div><span>19</span>19 вкладка</div>
<div><span>20</span>20 вкладка</div>
<div><span>21</span>21 вкладка</div>
<div><span>22</span>22 вкладка</div>
<div><span>23</span>23 вкладка</div>
<div><span>24</span>24 вкладка</div>
<div><span>25</span>25 вкладка</div>
</div>

<style>
#raz {
position: relative;
height: 250px;
border-top: 30px solid #fff;
}
#raz > div {
position: absolute;
height: 100%;
width: 100%;
visibility: collapse;
transition: 0s 9999999s;
box-sizing: border-box;
background-color: #fff;
box-shadow: 0 -1px #808081 inset, 1px 0 #808081 inset, -1px 0 #808081 inset;
padding: 5px;
border-top: none;
}
#raz > div:hover, #raz > div:nth-of-type(1) {
visibility: visible;
transition: 0s;
}
#raz:hover > div:not(:hover) {
visibility: hidden;
transition: 0s;
}
#raz > div > span, #raz > div:after {
position: absolute;
top: -30px;
line-height: 30px;
height: 30px;
width: 4%;
text-align: center;
background: #808080;
cursor: pointer;
}
#raz > div:not(:nth-of-type(1)):not(:hover):after {content: "1"; left: 0;}
#raz > div:nth-of-type(1) > span {left: 0;}
#raz > div:nth-of-type(2) > span {left: 4%;}
#raz > div:nth-of-type(3) > span {left: 8%;}
#raz > div:nth-of-type(4) > span {left: 12%;}
#raz > div:nth-of-type(5) > span {left: 16%;}
#raz > div:nth-of-type(6) > span {left: 20%;}
#raz > div:nth-of-type(7) > span {left: 24%;}
#raz > div:nth-of-type(8) > span {left: 28%;}
#raz > div:nth-of-type(9) > span {left: 32%;}
#raz > div:nth-of-type(10) > span {left: 36%;}
#raz > div:nth-of-type(11) > span {left: 40%;}
#raz > div:nth-of-type(12) > span {left: 44%;}
#raz > div:nth-of-type(13) > span {left: 48%;}
#raz > div:nth-of-type(14) > span {left: 52%;}
#raz > div:nth-of-type(15) > span {left: 56%;}
#raz > div:nth-of-type(16) > span {left: 60%;}
#raz > div:nth-of-type(17) > span {left: 64%;}
#raz > div:nth-of-type(18) > span {left: 68%;}
#raz > div:nth-of-type(19) > span {left: 72%;}
#raz > div:nth-of-type(20) > span {left: 76%;}
#raz > div:nth-of-type(21) > span {left: 80%;}
#raz > div:nth-of-type(22) > span {left: 84%;}
#raz > div:nth-of-type(23) > span {left: 88%;}
#raz > div:nth-of-type(24) > span {left: 92%;}
#raz > div:nth-of-type(25) > span {left: 96%;}
#raz > div > span {
visibility: visible;
transition: 0s 9999999s;
}
#raz > div:hover > span, #raz > div:nth-of-type(1) > span {
background: #e5e5e5;
transition: 0s;
}
#raz:hover > div:not(:hover) > span {
background: #808081;
transition: 0s;
}
</style>
Денис
Спасибо большое !!!
adminb
#tab2, #tab3 {position: fixed; }

.menu1 > a,
.menu1 #tab2:target ~ a:nth-of-type(1),
.menu1 #tab3:target ~ a:nth-of-type(1),
.menu1 > div { padding: 5px; border: 1px solid #aaa; }

.menu1 > a { line-height: 28px; background: #fff; text-decoration: none; }

#tab2,
#tab3,
.menu1 > div,
.menu1 #tab2:target ~ div:nth-of-type(1),
.menu1 #tab3:target ~ div:nth-of-type(1) {display: none; }

.menu1 > div:nth-of-type(1),
.menu1 #tab2:target ~ div:nth-of-type(2),
.menu1 #tab3:target ~ div:nth-of-type(3) { display: block; }

.menu1 > a:nth-of-type(1),
.menu1 #tab2:target ~ a:nth-of-type(2),
.menu1 #tab3:target ~ a:nth-of-type(3) { border-bottom: 2px solid #fff; }

Как тут добавить вкладки
NMitra
См http://jsfiddle.net/NMitra/jxwkrabq/
Анонимный
Спасибо. Помогите в 3-ем примере сделать вертикальные табы.
NMitra
Какой именно вариант, там где написано "Реализация попроще "?
Влад
"Реализация попроще". Да. Будьте добры. "Помогите в 3-ем примере сделать вертикальные табы."
NMitra
HTML тот же, а CSS (см. http://jsfiddle.net/NMitra/5znb1ok0/ )

#raz {
position: relative;
height: 243px;
border-right: 150px solid rgba(0,0,0,0);
}
#raz > div {
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
border: 1px solid rgb(128,128,128);
border-right: none;
background: #fff;
visibility: collapse;
transition: 0s 9999999s;
}
#raz > div:hover, #raz > div:nth-of-type(1) {
visibility: visible;
transition: 0s;
}
#raz:hover > div:not(:hover) {
visibility: hidden;
transition: 0s;
}
#raz > div > span {
position: absolute;
right: -149px;
width: 148px;
line-height: 30px;
height: 60px;
border: 1px solid rgb(128,128,128);
border-left: none;
background: rgba(128,128,128,1);
visibility: visible;
transition: 0s 9999999s;
cursor: pointer;
}
#raz > div:nth-of-type(1) > span {top: -1px; background: rgba(128,128,128,0);}
#raz > div:nth-of-type(2) > span {top: 60px;}
#raz > div:nth-of-type(3) > span {top: 121px;}
#raz > div:nth-of-type(4) > span {top: 182px;}
#raz > div:hover > span {
background: rgba(128,128,128,0);
transition: 0s;
}
#raz:hover > div:not(:hover) > span {
background: rgba(128,128,128,.9);
transition: 0s;
}
Влад
Спасибо Вам за вашу помощь! Помогло.
Анонимный
Скажите пожалуйста Наталья, а как сделать чтобы псевдокласс :focus работал на активной вкладке, я хочу чтобы вкладка цвет меняла при активизации? вот пример: http://jsfiddle.net/qap01a5k/. Ни как не получается - вроде все правельно сделал. (Иван)
NMitra
Так?
.korpus0 > input:checked + label { background: #ccc; }
Анонимный
Да! Спасибо! Очень помогли! (Иван)
Анонимный
как в варианте с переходом по щелчку правильно поменять фон для активной вкладки?
пробовал править эту часть кода и тогда 1 вкладка всё время с фоном, даже если она не выбрана
.menu1 > a:nth-of-type(1),
.menu1 #tab2:target ~ a:nth-of-type(2),
.menu1 #tab3:target ~ a:nth-of-type(3) { border-bottom: 2px solid #fff; }
NMitra
.menu1 > #tab2:not(:target) + #tab3:not(:target) ~ a:nth-of-type(1),
.menu1 #tab2:target ~ a:nth-of-type(2),
.menu1 #tab3:target ~ a:nth-of-type(3) { background: green; }
Анонимный
Здравствуйте. А как в третьем варианте зафиксировать выбранную вкладку, чтобы после перезагрузки страницы, она оставалась выбранной?
NMitra
Здравствуйте, тот, который при наведении курсора мышки?
Анонимный
То есть второй, там где по клику.
Анонимный
Или так получится только, если через инпуты делать?
NMitra
Попробуйте добавить скрипт

<script>
if (localStorage.getItem('tab')) {
location.hash = localStorage.getItem('tab');
}
var elA = document.querySelectorAll('a[href^="#tab"]');
for (var i = 0; i < elA.length; i++) {
elA[i].onclick = function() {
localStorage.setItem('tab', this.getAttribute('href'));
}
}
</script>
Сергей Анатольевич
Очень жаль, но первые 3 варианта не работают на родном браузере андроид устройств, будут ли какие рекомендации?
Прям совсем пичальбеда. Нужно реализовать список "популярные производители" - "все производители", решил воспользоваться вашим методом вкладок, но вылез вот такой жирный минус. Просто необходимы решения на чистом CSS, без JS во избежание проблем с индексацией поисковыми системами.
Спасибо.
NMitra
На CSS - это все возможные варианты: :checked, :target, :hover. Есть ещё :focus, но он в данном случае не в тему.

Не думаю, что будут проблемы с простым JS (если это не ajax, где содержимое вынесено в другой документ) - поисковый робот читает исходный код, а там будет весь контент.
Анонимный
Добрый вечер. Спасибо за очень полезные и интересные статьи. Подскажите, пожалуйста, как в первом примере увеличить высоту вкладок, чтобы можно было вставить фотографии людей (для отзывов).
NMitra
Доброе время суток.
Вкладки растягиваются под содержимое или вы имеете ввиду это http://jsfiddle.net/70fwnfb5/

.korpus > div, .korpus > input {
display: none;
}
.korpus label {
display: inline-block;
cursor: pointer;
}
.korpus label img {
vertical-align: middle;
}
.korpus input[type="radio"]:not(:checked) + label img {
opacity: .5;
}
.korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3) {
display: block;
padding: 5px;
border: 1px solid #aaa;
}
Анонимный
Спасибо большое. Теперь более менее разобрался. Label и input в css никак не хотели изменять свой размер на более крупный. Да и свойство border-radius нормально применялось только в ширь.
Александр
Такой странный глюк. Сделал вертикальные табы по первому варианту, только разместил их слева, но это не принципиально. Так вот, если на один из табов поместить какую-нибудь форму, где будут стоять теги < label > - текст из этих лэйблов будет помещаться на закладки табов при переключении на таб с формой. Аналогично происходит с выводом сообщений о ошибке скрипта jQuery.Validate - он начинает выводить свои сообщения в заголовках табов.

Вот картинки, иллюстрирующие это:
http://i71.fastpic.ru/big/2015/0520/9d/0c7e30bff1267a0613611e8d641b3a9d.jpg
http://i71.fastpic.ru/big/2015/0520/36/f40cf2603d8964fdcb74898d9e3ee836.jpg
http://i71.fastpic.ru/big/2015/0520/5c/d6b58e1ad8d84b8b564129e688b2d15c.jpg

На первой видны исходные табы. Далее я на табе "Дополнить карточку" добавил лэйблы к пунктам "Стандартный", "Уменьшенный" и "Увеличенный" у радиобокса (лейблы, естественно, прописаны правильно, с указанием for и имени радио). И теперь при переключении на таб "Дополнить карточку" эти лейблы оказываются на шапках первых трех закладок. Третий пример - я включил валидацию текстового поля для ввода количества страниц (минимум 2 знака). На других формах при ошибках ввода валидатор вставляет сообщение о ошибке сразу за инпутом. А здесь - выводит на шапке первого таба.

Помогите, пожалуйста, уже голову сломал, не могу понять почему так происходит.
NMitra
label вкладок нужно присвоить класс и в коде только этому классу присваивать значения или (не для IE7-) перед label поставить символ > (см. http://shpargalkablog.ru/2011/10/css-selectors.html). Пример http://jsfiddle.net/NMitra/6fnkaafz/

.korpus0 > label {}
Александр
Все именно так и сделано:

Сорри, сюда код запостить не смог, html-теги не пропускает. Положил нужную часть сюда:
http://jsfiddle.net/Gealut/j4p58wr4/

Можно и на сам сайт посмотреть, bpnf.ru
Александр
Все, вопрос отпал, победил сам. Надо было присвоить элементам label в радиобоксе (шапки табов) класс (у меня .maintab) и затем в CSS добавить этот класс:
.korpus0 > label.maintab {}
NMitra
:) см комментарий 97, только невнятно как-то описала..

Тут http://jsfiddle.net/Gealut/j4p58wr4/ содержимое вкладок в div, поэтому сосредоточила внимание на дочерних селекторах
Александр
Да, точно, вы же именно это и написали. Странно, когда раньше читал ваш совет, как-то совсем по-другому его понял. А когда сам сделал - теперь и совет ясным стал.
Анонимный
Здравствуйте!
Автору респект огромнейший!
Подскажите а как в реализации "CSS табы с переходом по наведению курсора мышки. Результат изменения сохраняется" сделать 3 таба вместо указанных 4?
путаюсь в коде со "span" , сколько не пробовал, не выходит
NMitra
Здравствуйте! Пример http://jsfiddle.net/NMitra/e05qwLjv/

#raz > div > span { /* кнопка */
width: 33.33%; /* 3 вкладки, а значит 100/3 */
}
#raz > div:nth-of-type(1) > span {left: 0; border-left-color: rgb(128,128,128);}
#raz > div:nth-of-type(2) > span {left: 33.33%;}
#raz > div:nth-of-type(3) > span {left: 66.66%;}
#raz > div:not(:nth-of-type(1)):not(:hover):after { /* появляется нижняя граница у первой кнопки */
width: 33.33%;
}
Анонимный
Приветствую!
Наталья, огромное спасибо за примеры. Уже используем именно ваш вариант "CSS Tabs с переходом по клику".
Теперь хотим соскочить с уже имеющейся сложной реализации табов (с помощью кучи javascript) на ваш вариант в "CSS табы с переходом по наведению курсора мышки. Результат изменения сохраняется" (вариант попроще). Расположили вкладки вертикально (это просто), но вот теперь надо чтобы сами вкладки (с текстом "HTML", "CSS") выделялись своим фоном - неактивные вкладки одним фоном, активная - другим. Пока получилось реализовать только вариант когда все начинает работать правильно только после того как курсор мыши окажется над div'ом "raz" (до этого никакая вкладка не выбрана и никакой таб не отображается). Дальше есть извращенческих 2 варианта: 1) нарисовать подложку (5-ю псевдо вкладку, расположить ее в самый низ и которая никогда более не покажется), 2) прицепить фон в виде картинок к самим ТАБАМ (со смещением) - пробуем этот извращенческий вариант, но там тоже возникли проблемы.
Есть ли более изящный способ реализации задумки?
NMitra
Здравствуйте, если я правильно вас поняла: http://jsfiddle.net/x8797rku/2/

#raz { /* корпус */
position: relative;
height: 250px;
border-top: 30px solid #fff;
}
#raz > div { /* вкладка */
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
visibility: collapse;
transition: 0s 9999999s;
box-sizing: border-box;
background: #fff;
padding: 5px;
}
#raz > div:before { /* рамка вкладки */
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: #808080 solid 1px;
border-top: none;
}
#raz > div:hover, #raz > div:nth-of-type(1) {
visibility: visible;
transition: 0s;
}
#raz:hover > div:not(:hover) {
visibility: hidden;
transition: 0s;
}
#raz > div > span { /* кнопка */
position: absolute;
top: -30px;
line-height: 30px;
height: 30px;
width: 25%; /* 4 вкладки, а значит 100/4 */
text-align: center;
box-sizing: border-box;
border: 1px solid rgb(128,128,128);
border-left-color: rgba(0,0,0,0);
visibility: visible;
transition: 0s 9999999s;
cursor: pointer;
}
#raz > div:nth-of-type(1) > span {left: 0; border-left-color: rgb(128,128,128); background: LightGreen;}
#raz > div:nth-of-type(2) > span {left: 25%; background: blue;}
#raz > div:nth-of-type(3) > span {left: 50%; background: Yellow;}
#raz > div:nth-of-type(4) > span {left: 75%; background: Gray;}
#raz > div:hover > span, #raz > div:nth-of-type(1) > span {
border-bottom-color: rgba(0,0,0,0);
transition: 0s;
}
#raz:hover > div:not(:hover) > span {
border-bottom-color: rgba(128,128,128,.99);
transition: 0s;
}
#raz:hover > div:nth-of-type(1):hover > span {
background: LightGreen;
}
#raz:hover > div:nth-of-type(2):hover > span {
background: LightBlue;
}
#raz:hover > div:nth-of-type(3):hover > span {
background: LightYellow;
}
#raz:hover > div:nth-of-type(4):hover > span {
background: LightGray;
}
#raz > div:not(:nth-of-type(1)):after {
content: "CSS";
position: absolute;
left: 0;
top: -30px;
line-height: 30px;
height: 30px;
width: 25%;
text-align: center;
box-sizing: border-box;
border: 1px solid rgb(128,128,128);
background: green;
}
#raz:hover > div:nth-of-type(1) {
z-index: 2;
}
#raz:hover > div:nth-of-type(1):not(:hover) > span {
background: green;
}
Сергей
Если использовать этот алгоритм проверки то, все равно, к сожалению, остается глюк. Но уже другой.
Вы сделали мегавариант когда каждая вкладка обладает своим индивидуальным цветом "активен-неактивен" (темнее-светлее), на самом деле даже достаточно когда у всех вкладок одинаковая пара цветов для активной и неактивной вкладки.
NMitra
Всё таки неверно поняла: "чтобы сами вкладки (с текстом "HTML", "CSS") выделялись своим фоном". См.: http://jsfiddle.net/x8797rku/3/
Сергей
Ваш код работает отлично! Ошибок нет.
Но когда попытался изменить цвет неактивной вкладки с белого на красный, получаю глюк.
Значит делаю что-то не то. Изменил стили вот так:
#raz { /* корпус */
position: relative;
height: 250px;
border-top: 30px solid #fff;
}
#raz > div { /* вкладка */
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
visibility: collapse;
transition: 0s 9999999s;
box-sizing: border-box;
background: #fff;
padding: 5px;
}
#raz > div:before { /* рамка вкладки */
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: #808080 solid 1px;
border-top: none;
}
#raz > div:hover, #raz > div:nth-of-type(1) {
visibility: visible;
transition: 0s;
}
#raz:hover > div:not(:hover) {
visibility: hidden;
transition: 0s;
}
#raz > div > span { /* кнопка */
position: absolute;
top: -30px;
line-height: 30px;
height: 30px;
width: 25%; /* 4 вкладки, а значит 100/4 */
text-align: center;
box-sizing: border-box;
border: 1px solid rgb(128,128,128);
border-left-color: rgba(0,0,0,0);
visibility: visible;
transition: 0s 9999999s;
cursor: pointer;
background:red;
}
#raz > div:nth-of-type(1) > span {left: 0; border-left-color: rgb(128,128,128);}
#raz > div:nth-of-type(2) > span {left: 25%;}
#raz > div:nth-of-type(3) > span {left: 50%;}
#raz > div:nth-of-type(4) > span {left: 75%;}
#raz > div:hover > span, #raz > div:nth-of-type(1) > span {
border-bottom-color: rgba(0,0,0,0);
transition: 0s;
background: green;
}
#raz:hover > div:not(:hover) > span {
border-bottom-color: rgba(128,128,128,.99);
transition: 0s;
background: red;
}
#raz > div:not(:nth-of-type(1)):after {
content: "CSS";
position: absolute;
left: 0;
top: -30px;
line-height: 30px;
height: 30px;
width: 25%;
text-align: center;
box-sizing: border-box;
border: 1px solid rgb(128,128,128);
background: red;
}
#raz:hover > div:nth-of-type(1) {
z-index: 2;
}
#raz:hover > div:nth-of-type(1):not(:hover) > span {
background: red;
}
NMitra
См.: http://jsfiddle.net/x8797rku/4/

#raz:hover > div:not(:hover) > span {
border-bottom-color: rgba(128,128,128,.99);
transition: 0s;
background: rgb(254,0,0);
}
Сергей
Работает! Все супер!
Спасибо огромное! Я восхищен
Сергей
И все-таки еще вопрос.
Попробовал заменить цвет активной вкладки (зеленый) на изображение фона и теперь активная вкладка становится бесцветной когда указатель мыши уходит за пределы raz. Неожиданно.
Вносил только такое изменение:
#raz:hover > div:hover > span, #raz > div:nth-of-type(1) > span {
border-bottom-color: rgba(0,0,0,0);
transition: 0s;
background: url(images/bgact.png); /*тут раньше было green*/
}
На всякий случай скажу, что дальше я думал на вашем примере сделать фон у неактивных вкладок (bgnoact.png) и сделать так, чтобы картинка фона немного "залазила" (перекрывала) содержание самой вкладки (на вашем примере с горизонтальным размещением вкладок) это будет изображение стрелки направленной вниз (с "частичным перекрытием содержимого таба, в самих табах будут картинки какие-нибудь).
Дальше я планировал переделать ваш код под свою задачу так, чтобы вкладки размещались справа от содержимого, расположить их одна под другой, и фоном у активной вкладки была бы стрелка направленная влево, чтобы эта стрелка немного залазила поверх на содержимое самого таба. Содержимое самих табов - картинки. При масштабировании окна размер всего этого дела чтобы менялся пропорционально (хотя бы только по горизонтали). Я написал так подробно цель, потому что стал бояться что какой-то из этих шагов окажется нереализуем на чистом css в принципе. Потому что даже при замене фона на картинку в background сразу же стали происходить непонятные для меня вещи. А в css я как уже убедился - ноль.
Я даже вот до сих пор не могу понять, почему при замене цвета фона на картинку фона изменяется реакция. Чем это логически может объясняться? Это какая-то магия получается.
Сергей
Поправка: залазить на содержимое табов будет только фон (в виде стрелки) активной вкладки. "наслоение стрелки на содержимое" планирую делать с помощью смещений у span'ов по значению атрибута top у стиля (если вкладки будут размещены вертикально, то с помощью атрибута right). Надеюсь, что тут тоже не возникнет проблем с логикой смены фона в нужный момент.
NMitra
transition не сохраняет (в списке http://www.w3.org/TR/css3-transitions/#animatable-css нет background-image)
Сергей
Вот оно что. Попробую через градиенты сделать похожее на фон картинки. Может будет сохранять. Отпишу потом здесь результат.
Сергей
Не получилось через градиенты. Пробовал вот такое: background: linear-gradient(to top, #b5bdc8 0%, #828c95 36%, #28343b 100%);
Тоже не сохраняет.
Жаль. Досадное ограничение css.. Но зато какой опыт лично для меня! Надеюсь, что выявленное ограничение кому-нибудь поможет.
И все равно огромное вам спасибо!
Муслим Гасанов
Добрый день. Вопрос не по табам, не знал куда здесь написать. Скажите, пожалуйста, как сделать так чтобы ниспадающее меню открывалось по клику, а не при наведении курсора. Спасибо
Муслим Гасанов
А вот еще пример http://tympanus.net/Blueprints/HorizontalDropDownMenu/
NMitra
Добрый день, мне больше всего импонирует этот вариант http://shpargalkablog.ru/2012/03/css-tabs.html#tabindex (только что добавила его). Если не нравится, что при наведении разворачиваются пункты, то уберите строки с :hover, но с ним как-то надёжней: меню будет работать на большом количестве устройств.

Но вы можете использовать любой, убрав стили для первой вкладки, например, http://jsfiddle.net/f8c8rzbd/ Вопрос только в том, как он будет сворачиваться при ненадобности.

Или нужно смотреть в сторону JS.
Муслим Гасанов
Спасибо. А есть возможность использовать каскадом? Чтобы открыли по клику, потом еще и еще и еще и до скончания....)) Что-то типа таб внутри таба как-то не выходит(.
NMitra
Можно, но, увы, у меня не так много свободного времени. Посмотрите пример тут http://jsfiddle.net/NMitra/5uarcff5/ ( http://shpargalkablog.ru/2010/11/poyavlyayushchiesya-commentarii.html ) или проще воспользуйтесь тегом details http://shpargalkablog.ru/2013/04/details-html.html
Муслим Гасанов
Спасибо
Анонимный
а вот во 2-м варианте (CSS Tabs, с переходом по щелчку) реально ли как то поставить ширину вкладки в пикселях?) под текст ширина вкладки легко самоподстраивается, а вот когда на странице 2 вкладки, смотрится не очень красиво((
Анонимный
под шириной вкладки я имел ввиду, чтоб кнопку (к примеру tab1) по ширине зафиксировать в пикселях.
NMitra
Так?

.menu1 > a {display: inline-block; padding: 0 5px; margin-bottom: -2px;}
.menu1 > a[href="#tab1"] {width: 100px;}
Анонимный
Здраствуйте, меня зовут Алексей, если не сложно, помогите пожалуйста:
Это (CSS Tabs, с переходом по щелчку) но с изменениями в дизайне (ссылка): http://tm-dwarfs.clan.su/info/html_css/quest.txt
Если сложно все это реализовать с этим видом таба, то можно и другой, главное чтоб работал.

Вопрос №1. Как сделать матрешку из вкладок с этим кодом (ссылка выше)? а то пытался и бестолку(
На сайте хочу сделать одну огромную страницу, в которой приблизительно по прикидкам в сумме будет 24 вкладки. Указано в примере ниже.
Вопрос №2. Как сделать ширину для кнопок (т.е. у каждого слоя матрешки вкладок будет разная ширина, как про цвета написал ниже.), чтоб они подстраивались не только под размер текста, но и под ширину страницы.
Ширина страницы 830px, но для кнопок она должна быть 800px (т.е. чтоб небольшие отступы все же были от краев страницы; желательно, но не обязательно).
Хотя как вариант сделать в % размер кнопок, который и будет зависить от ширины страницы.
Вопрос №3. Как сделать разные цвета в разных слоях матрешки вкладок? Указано в примере ниже.

P.S. как вариант, можете добавить в саму статью про это, не думаю, что только у меня такие вопросы возникают или возникнут.

Пример:
1) профессия 1 Подразделяется на: [цвет1]
1.1) вкладка 1.1
1.2) вкладка 1.2 [цвет3; у этих 4 вкладок]
1.3) вкладка 1.3
1.4) вкладка 1.4

2) профессия 2 Подразделяется на: [цвет1]
2.1) вкладка 2.1 Подразделяется на: [цвет2]
2.1.1) вкладка 2.1.1
2.1.2) вкладка 2.1.2 [цвет3; у этих 4 вкладок]
2.1.3) вкладка 2.1.3
2.1.4) вкладка 2.1.4
2.2) вкладка 2.2 Подразделяется на: [цвет2]
2.2.1) вкладка 2.2.1
2.2.2) вкладка 2.2.2 [цвет3; у этих 4 вкладок]
2.2.3) вкладка 2.2.3
2.2.4) вкладка 2.2.4

3) профессия 3 Подразделяется на: [цвет1]
3.1) вкладка 3.1
3.2) вкладка 3.2
3.3) вкладка 3.3
3.4) вкладка 3.4 [цвет3; у этих 7 вкладок]
3.5) вкладка 3.5
3.6) вкладка 3.6
3.7) вкладка 3.7

4) профессия 4 Подразделяется на: [цвет1]
4.1) вкладка 4.1
4.2) вкладка 4.2
4.3) вкладка 4.3 [цвет3; у этих 5 вкладок]
4.4) вкладка 4.4
4.5) вкладка 4.5

5) профессия 5 Подразделяется на: [цвет1]
5.1) вкладка 5.1
5.2) вкладка 5.2 [цвет3; у этих 2 вкладок]

Анонимный
Ах да, забыл.

Вопрос №4. Как сделать так, автоматом открывалась 1) профа 1 --> вкладка 1.1
А потом если шастать по главным вкладкам, то открывались:
2) профа 2 --> вкладка 2.1 --> вкладка 2.1.1
3) профа 3 --> вкладка 3.1
4) профа 4 --> вкладка 4.1
5) профа 5 --> вкладка 5.1
NMitra
Здравствуйте, Алексей. Извините, это уже индивидуальная работа. Совсем нет времени свободного - для блога (статьи+комментарии) минутки выкраиваю. Поэтому публикации так редко выходят.
Анонимный
понятно((
Анонимный
жаль пояснений ноль в инете(( так бы хоть что то мог придумать
lavensaari
День добрый! Хорошие примеры. Я правильно понял, что CSS по вкладкам рассчитан на определенное количество вкладок. Если меняется количество вкадок то соответственно нужно переписывать CSS?
Спасибо
С Уважением,
Михаил
NMitra
Добрый день! Скорее дописать. В CSS нет циклов.
lavensaari
Вот хорошо бы еще увидеть вариант с вертикальными вкладками ))
NMitra
Идея хорошая, спасибо, но точно не в ближайшее время
Алекс
Привет! Любопытна архитектура - CSS Tabs, с переходом по щелчку -
Назначение именно элемента
для таргетирования, а не div допустим, пояснишь?
И назначение строчки css - #tab2, #tab3 {position: fixed; } - напишешь?
Алекс
В сообщении выше - Назначение именно элемента br . Роботу не понравились скобочки:)
NMitra
Привет,

br короче
Иначе будет прокручивать окно к id
akula-z
Здравствуйте!
Скажите, пожапуйста, как убрать рамку вокруг табов?
NMitra
Здравствуйте, какой именно вариант? Какая именно рамка, общая? Рамку делает свойство border: http://shpargalkablog.ru/2013/12/border.html
akula-z
Да, общая рамка, вокруг текста.
То есть, мне надо просто удалить border: http://shpargalkablog.ru/2013/12/border.html
NMitra
Верно, в нужном месте убрать border или border-top и т.п.
sat
Добавил табы по наведению в joomshopping, в карточку товара. Все работает отлично, но вкладки при открытии не растягивают страницу вниз, как было, когда стояли в коде, а выводят содержимое сверху. Подскажите, плиз, что сделать, чтобы было правильно?
NMitra
Покажите URL с кодом, возможно стили конфликтуют
sat
На компе делаю.Вот, на скорую руку, закинул http://satinternet.ru/explore/features/2013-04-03-13-04-04/shoping/product/view/9/1
NMitra
Обёртку сделайте внутри div с

overflow: auto;
height: 208px; /* ваша высота */
sat
То есть, весь это код таба обернуть?
NMitra
Нет, внутри div, например, не

<div>первая вкладка</div>

а

<div>
<div style="overflow: auto; height: 208px;">первая вкладка</div>
</div>
sat
Спасибо, получилось. Извиняюсь за дерзость)), а есть столь же простой вариант, чтобы без прокрутки?
NMitra
Предыдущий комментарий не к той статье написала :)

Увеличьте высоту height: 300px;

В CSS:
#raz { /* корпус */
position: relative;
height: 300px; /* корпус */
border-top: 30px solid #fff;
}

<div>
<div style="overflow: auto; height: 290px;">первая вкладка</div>
</div>
Лёха
< input ... />
слэш в конце это пережиток Doctype XHTML1.0
в html5 не нужен он

статья зачёт, сразу видно толковый верстальщик )
Лёха
а ещё вопрос: почему именно через input radio надо делать, почему не ul например?
NMitra
Для того чтобы работал :checked
Я где ставлю - где не ставлю. В интерпретированном коде (F12) вообще везде везде закрывающийся тег </input>
Лёха
не, такого тэга вообще нет
http://htmlbook.ru/html/input
NMitra
Я и не спорю, так Мозила интерпретирует. Я о том, что это не важно, так как в данном случае браузер поймёт и правильно отобразит тег как бы он не был написан.
Анонимный
Здравствуйте! Скажите пожалуйста как можно изменить цвет активной вкладки (background) в первом примере вкладок с :hover?
NMitra
Здравствуйте! Что-то такое было, посмотрите комментарии 79, 105, 107, 109
Unknown
Здравствуйте! Как сделать так чтобы во втором примере при наведении курсора мыши вкладки меняли цвет?
NMitra
Здравствуйте, https://jsfiddle.net/NMitra/v871czju/

.menu1 > a:hover { background: red; }
akula-z
День добрый.
Интересует такой вопрос, вернее, даже 2 вопроса:
1. Как сделать, чтобы при обновлении страницы (F5), тебя снова не перекидывало на вкладку номер 1, а ты оставался на той вкладке, которая была открыта до этого. Например, у тебя открыта вкладка номер 3, ты обновляешь страницу и должен оставаться на вкладке номер 3, но вместо этого тебя почему-то перебрасывает на 1 вкладку. Как это починить?
2. Я использую вкладки для видео, и у меня почему-то в браузере Гугл Хром, при загрузке страницы, когда ты находишься на 1 вкладке, почему-то автоматически начинает воспроизводиться звук видео с вкладки номер 2, хотя ты еще даже не успел перейти на 2 вкладку. В Фаерфоксе такого нет, а вот в Хроме, увы, есть. И еще проблема в Хроме, если, например, ты смотришь видео с вкладки номер 2 и не нажимая на паузу (то есть, видео продолжает воспроизводиться) переходишь на вкладку номер 1, то ты слышишь звуки с видео от предыдущей вкладки, где ты только что был, то есть вкладке номер 2. То есть, при переходе между вкладками страница не перезагружается и получается какая-то ерунда, слышно одновременно, что воспроизводится и в 1 и во 2 вкладке, а такого быть не должно.
Скажите, пожалуйста, как это исправить?
NMitra
Добрый день.
Для видео есть более интересный вариант с помощью IFRAME и ссылок: http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#target Планирую в ближайшее время статью написать.
Можно на JS менять только URL, тогда не будет воспроизводить звук с видео других вкладок.
У меня есть статья http://shpargalkablog.ru/2011/01/youtube.html Я её как раз редактировать начала.
akula-z
Скажите, пожалуйста, куда можно скинуть вам адрес своего сайта, где установлены ваши табы? Хочу задать вопрос по их работе, но сайт еще в стадии наполнения, поэтому не хочу его светить тут.
NMitra
n.mitra@yandex.ru - только после выходных
akula-z
Написала вам на мейл.
akula-z
Наталья, скажите, пожалуйста, мне ожидать ответа от вас?
Ralina
Возможно ли сделать ссылку на определенный таб с другой страницы?
NMitra
См. второй вариант, там ссылки с хэшами идут, вида http://shpargalkablog.ru/2012/03/css-tabs.html#tab2