2
一直困在這裏幾個小時，無法完全弄清楚發生了什麼問題。我有2個主要選項卡，當您單擊它們時，內容中將打開另一組選項卡。第一個主選項卡和它的子選項卡工作正常。但是，第二個選項卡及其子選項卡不起作用。這裏是代碼 - 感謝幫助傢伙。標籤內部的純粹CSS選項卡
這是HTML：
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">EVOLVE</label>
<div class="content">
<div class="table tab">
<input type="radio" id="tabchild-1" name="tabchild-group-1" checked>
<label for="tabchild-1">FOREST</label>
<div class="content">
Forest Cards go Here.
</div>
</div>
<div class="table tab">
<input type="radio" id="tabchild-2" name="tabchild-group-1">
<label for="tabchild-2">MOUNTAINS</label>
<div class="content">
Mountain Cards go Here.
</div>
</div>
<div class="table tab">
<input type="radio" id="tabchild-3" name="tabchild-group-1">
<label for="tabchild-3">SWAMP</label>
<div class="content">
Swamp Cards go Here.
</div>
</div>
<div class="table tab">
<input type="radio" id="tabchild-4" name="tabchild-group-1">
<label for="tabchild-4">PLAINS</label>
<div class="content">
Plains Cards go Here.
</div>
</div>
<div class="table tab">
<input type="radio" id="tabchild-5" name="tabchild-group-1">
<label for="tabchild-5">DARKNESS</label>
<div class="content">
Darkness Cards go Here.
</div>
</div>
<div class="table tab">
<input type="radio" id="tabchild-6" name="tabchild-group-1">
<label for="tabchild-6">NEUTRAL</label>
<div class="content">
Neutral Cards go Here.
</div>
</div>
</div>
</div>
<div class="tab2">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">ENHANCE</label>
<div class="content2">
<div class="table2 tab2">
<input type="radio" id="tabchild-1" name="tabchild-group-2" checked>
<label for="tabchild-1">FOREST</label>
<div class="content2">
Forest Hero Cards go Here.
</div>
</div>
<div class="table2 tab2">
<input type="radio" id="tabchild-2" name="tabchild-group-2">
<label for="tabchild-2">MOUNTAINS</label>
<div class="content2">
Mountain Hero Cards go Here.
</div>
</div>
<div class="table2 tab2">
<input type="radio" id="tabchild-3" name="tabchild-group-2">
<label for="tabchild-3">SWAMP</label>
<div class="content2">
Swamp Hero Cards go Here.
</div>
</div>
<div class="table2 tab2">
<input type="radio" id="tabchild-4" name="tabchild-group-2">
<label for="tabchild-4">PLAINS</label>
<div class="content2">
Plains Hero Cards go Here.
</div>
</div>
<div class="table2 tab2">
<input type="radio" id="tabchild-5" name="tabchild-group-2">
<label for="tabchild-5">DARKNESS</label>
<div class="content2">
Darkness Hero Cards go Here.
</div>
</div>
</div>
</div>
<div class="background_tab"></div>
</div>
這是CSS
.tabs {position: relative;min-height: 200px;}
.tab, .tab2 {float: left;}
.tab{text-decoration:none;}
.tab2{text-decoration:none;}
.tab label, .tab2 label {
padding: 10px;
margin-left: -1px;
position: relative;
left: 1px;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid #444;
border-left: 1px solid #333;
background: #3d3d3e;
background: -webkit-linear-gradient(#3d3d3e, #2a2a2a);
background: -moz-linear-gradient(#3d3d3e, #2a2a2a);
background: -o-linear-gradient(#3d3d3e, #2a2a2a);
background: linear-gradient(#3d3d3e, #2a2a2a);
box-shadow: 0 1px 0 #3d3d3d, inset 0 1px 0 #5a5a5a;
height: 100%;
line-height: 24px;
overflow: hidden;
text-align: center;
font-size: 12px;
font-family: verdana;
font-weight:bolder;
z-index:1;
}
.tab [type=radio], .tab2 [type=radio]{display: none;}
.content, .content2{
position: absolute;
top: 28px;
left: 0;
right: 0;
bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid #666;
background: #5d5d5e;
background: -webkit-linear-gradient(#5d5d5e, #4a4a4a);
background: -moz-linear-gradient(#5d5d5e, #4a4a4a);
background: -o-linear-gradient(#5d5d5e, #4a4a4a);
background: linear-gradient(#5d5d5e, #4a4a4a);
box-shadow: 0 1px 0 #5d5d5d, inset 0 1px 0 #4a4a4a;
padding: 0px 25px 25px;
margin-top:25px;
z-index:1
}
[type=radio]:checked ~ label{
box-shadow: inset 0 0 10px black;
text-shadow: -2px -2px 1px #111111, -1px -1px 1px #111111, 1px 1px 1px #111111, 2px 2px 1px #111111, -3px -3px 1px #111111, -1px 1px 1px #111111, -3px 3px 1px #111111, 5px -2px 1px #111111, 5px 3px 1px #111111;
color:orangered;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {z-index: 2;}
[type=radio]:checked ~ label ~ .content2 {z-index: 3;}
.background_tab{
float:left;
padding: 10px 10px 26px;
margin-left: -1px;
position: relative;
left: 2px;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid #333;
background: #3d3d3e;
background: -webkit-linear-gradient(#3d3d3e, #2a2a2a);
background: -moz-linear-gradient(#3d3d3e, #2a2a2a);
background: -o-linear-gradient(#3d3d3e, #2a2a2a);
background: linear-gradient(#3d3d3e, #2a2a2a);
box-shadow: 0 1px 0 #3d3d3d, inset 0 1px 0 #5a5a5a;
height: 100%;
line-height: 24px;
overflow: hidden;
text-align: center;
font-size: 12px;
font-family: verdana;
margin-top:14px;
width:729px;
}
謝謝Nienn，我完全忽略了！ –
沒問題=）。 – nienn