Скорее всего я невнимателен. Что то упустил.
Мне нужно создать два набора "табов" (вкладок на css) на одной странице.
Первый набор работает корректно, а второй нет. У него не активируются (изменяют стиль) заголовки.
Или некорректно активируются - нажимаю на третий таб - активируется заголовок первого.
Вот тут все сразу станет понятно о чем речь.
https://jsfiddle.net/u9tjnkzc/Почему не активируются заголовки табов?
Код (лучше смотреть jsfiddle чем эту простыню)
<div class="ui_tabs_1">
<input id="ui_tab_1_1" type="radio" name="ui_tabs_1" checked>
<label for="ui_tab_1_1" title="Вкладка 1">Табы 1 Вкладка 1</label>
<input id="ui_tab_1_5" type="radio" name="ui_tabs_1">
<label for="ui_tab_1_5" title="Вкладка 1">Табы 1 Вкладка 1</label>
<section id="content-ui_tab_1_1">
Контент вкладки 1
</section>
<section id="content-ui_tab_1_5">
Контент вкладки 2
</section>
</div>
<div class="ui_tabs_2">
<input id="ui_tab_1_2" type="radio" name="ui_tabs_2" checked>
<input id="ui_tab_1_3" type="radio" name="ui_tabs_2">
<input id="ui_tab_1_4" type="radio" name="ui_tabs_2">
<label for="ui_tab_1_2">Табы 2 Вкладка 1</label>
<label for="ui_tab_1_3">Табы 2 Вкладка 2</label>
<label for="ui_tab_1_4">Табы 3 Вкладка 3</label>
<section id="content-ui_tab_1_2">
Контент вкладки 1
</section>
<section id="content-ui_tab_1_3">
Контент вкладки 2
</section>
<section id="content-ui_tab_1_4">
Контент вкладки 3
</section>
</div>
/* Прячем чекбоксы */
.ui_tabs_1>input,.ui_tabs_2>input
{
display: none;
position: absolute;
}
/* Базовый контейнер табов */
.ui_tabs_1,.ui_tabs_2
{
padding: 0px;
margin: 0 auto;
}
/* Стили секций с содержанием */
.ui_tabs_1>section,.ui_tabs_2>section
{
display: none;
padding: 10px;
background: #222A37;
border: 1px solid #383838;
color:#CDCFD2;
font-family: Arial;
font-size: .875rem;
}
/* Стили переключателей вкладок (табов) */
.ui_tabs_1>label,.ui_tabs_2>label
{
display: inline-block;
margin: 0 0 -1px;
font-family: Arial;
font-size: .875rem;
padding: .625rem 1.25rem;
text-align: center;
color: #CDCFD2;
border: 1px solid #383838;
background: #171B23;
-webkit-user-select: none;
-moz-user-select: none;
}
/* Изменения стиля переключателей вкладок при наведении */
.ui_tabs_1>label:hover,.ui_tabs_2>label:hover
{
color: #ffffff;
cursor: pointer;
}
/* Стили для активной вкладки */
.ui_tabs_1>input:checked+label,.ui_tabs_2>input:checked+label
{
color: #ffffff;
border-top: 1px solid #3A4353;
border-bottom: 1px solid #222A37;
background: #222A37;
}
/* Активация секций с помощью псевдокласса :checked */
#ui_tab_1_1:checked~#content-ui_tab_1_1, #ui_tab_1_2:checked~#content-ui_tab_1_2, #ui_tab_1_3:checked~#content-ui_tab_1_3, #ui_tab_1_4:checked~#content-ui_tab_1_4 {display: block;}
#ui_tab_1_5:checked~#content-ui_tab_1_5, #ui_tab_1_6:checked~#content-ui_tab_1_6, #ui_tab_1_7:checked~#content-ui_tab_1_7, #ui_tab_1_8:checked~#content-ui_tab_1_8 {display: block;}
Простой
