Я нашел пример CSS вкладки здесь; Я использую третий пример "target". Однако, когда я попытался добавить вкладку ЧЕТВЕРТАЯ, все ломается, даже с первых 3 (рабочих) вкладок. Моя попытка здесь;
Я считаю, что необходимо скорректировать следующие исходные коды CSS, о которых я не знаю, как понять;
/* Target Tabs */
.tabs-target span:nth-of-type(1):not(:target) ~ span:nth-of-type(2):not(:target) ~ .tab:nth-of-type(1),
.tabs-target span:nth-of-type(2):target ~ .tab:nth-of-type(2),
.tabs-target span:nth-of-type(1):target ~ .tab:nth-of-type(3)
{
display: block;
}
Что мне нужно, чтобы настроить вкладку "ЧЕТВЕРТАЯ" для правильной работы?
Это работает:
.tabs-target span:nth-of-type(1):not(:target) ~ span:nth-of-type(2):not(:target) ~ span:nth-of-type(3):not(:target) ~ span:nth-of-type(4):not(:target) ~ .tab:nth-of-type(1),
.tabs-target span:nth-of-type(4):target ~ .tab:nth-of-type(1),
.tabs-target span:nth-of-type(3):target ~ .tab:nth-of-type(2),
.tabs-target span:nth-of-type(2):target ~ .tab:nth-of-type(3),
.tabs-target span:nth-of-type(1):target ~ .tab:nth-of-type(4) {
display: block;
}
Пример скрипки
Благодаря этому вы можете добавить любое количество вкладок, просто добавив в html
HTML
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
Tab One
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
Tab Two
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
Tab Three
</div>
</div>
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">Tab Four</label>
<div class="content">
Tab Four
</div>
</div>
</div>
<- для добавления дополнительных вкладок просто скопируйте.... полностью и соответствующим образом измените его значение. ->
CSS
.tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}