如何將這個ID選擇器重寫爲類或通用選擇器？

Question

以下選擇器允許我顯示四個選項卡，但我希望顯示5,6和更多的通用代碼。是否有另一種方法來爲任何數量的選項卡編寫此CSS代碼？ （我更喜歡只有CSS的解決方案）。

#tab1:checked ~ #content1, 
 
#tab2:checked ~ #content2, 
 
#tab3:checked ~ #content3, 
 
#tab4:checked ~ #content4 { 
 
    display: block; 
 
}

<input id="tab1" type="radio" name="tabs" checked> 
 
    <label for="tab1">Codepen</label> 
 
    
 
    <input id="tab2" type="radio" name="tabs"> 
 
    <label for="tab2">Dribbble</label> 
 
    
 
    <input id="tab3" type="radio" name="tabs"> 
 
    <label for="tab3">Dropbox</label> 
 
    
 
    <input id="tab4" type="radio" name="tabs"> 
 
    <label for="tab4">Drupal</label> 
 
    
 
    <input id="tab5" type="radio" name="tabs"> 
 
    <label for="tab5">Drupal</label>

這裏是一個JSFiddle一個完整的演示。

Answer 1

你可以重寫你的HTML有點來實現這一點：

<input id="tab1" type="radio" name="tabs" class="tabs-radio" checked> 
<label for="tab1">Codepen</label> 
<section id="content1" class="tabs-content"> 
.... 
</section> 
<input id="tab2" type="radio" name="tabs" class="tabs-radio"> 
.... 

然後，你可以簡單地做：

.tabs-radio:checked + * + .tabs-content { 
    display: block; 
} 

唯一的問題就是定位標籤/塊：其中一個應該是絕對定位

Answer 2

雖然你說JS並不理想，但我認爲我會發佈一個JS解決方案讓你看看，因爲你說你會訴諸它，如果需要的話......

function contentShow() { 
 
    var tabs = document.getElementsByTagName("input"); 
 
    for(var i = 0; i < tabs.length; i++) { 
 
    if (tabs[i].checked == true) { 
 
     var tabid = tabs[i].id; 
 
     var tabstripped = tabid.replace('tab',''); 
 
     var contentid = "content"+ tabstripped; 
 
     var sections = document.getElementsByTagName("section"); 
 
     for(var i = 0; i < sections.length; i++) { 
 
      sections[i].style.display = "none"; 
 
     } 
 
     document.getElementById(contentid).style.display = "block"; 
 
    } 
 
    } 
 
}

*, *:before, *:after { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    font: 14px/1 'Open Sans', sans-serif; 
 
    color: #555; 
 
    background: #eee; 
 
} 
 

 
h1 { 
 
    padding: 50px 0; 
 
    font-weight: 400; 
 
    text-align: center; 
 
} 
 

 
p { 
 
    margin: 0 0 20px; 
 
    line-height: 1.5; 
 
} 
 

 
main { 
 
    min-width: 640px; 
 
    max-width: 1600px; 
 
    padding: 50px; 
 
    margin: 0 auto; 
 
    background: #fff; 
 
} 
 

 
section { 
 
    display: none; 
 
    padding: 20px 0 0; 
 
    border-top: 1px solid #ddd; 
 
} 
 

 
input { 
 
    display: none; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    margin: 0 0 -1px; 
 
    padding: 15px 25px; 
 
    font-weight: 600; 
 
    text-align: center; 
 
    color: #bbb; 
 
    border: 1px solid transparent; 
 
} 
 

 
label:before { 
 
    font-family: fontawesome; 
 
    font-weight: normal; 
 
    margin-right: 10px; 
 
} 
 

 
/*label[for*='1']:before { content: '\f1cb'; } 
 
label[for*='2']:before { content: '\f17d'; } 
 
label[for*='3']:before { content: '\f16b'; } 
 
label[for*='4']:before { content: '\f1a9'; }*/ 
 

 
label:hover { 
 
    color: #888; 
 
    cursor: pointer; 
 
} 
 

 
input:checked + label { 
 
    color: #555; 
 
    border: 1px solid #ddd; 
 
    border-top: 2px solid orange; 
 
    border-bottom: 1px solid #fff; 
 
} 
 

 
@media screen and (max-width: 650px) { 
 
/* label { 
 
    font-size: 0; 
 
    } 
 
    label:before { 
 
    margin: 0; 
 
    font-size: 18px; 
 
    } 
 
}*/ 
 

 
@media screen and (max-width: 400px) { 
 
    label { 
 
    padding: 15px; 
 
    } 
 
}

<h1>Responsive CSS Tabs</h1> 
 

 
<main> 
 
    
 
    <input id="tab1" type="radio" name="tabs" onclick="contentShow()"> 
 
    <label for="tab1">Tab 1</label> 
 
    
 
    <input id="tab2" type="radio" name="tabs" onclick="contentShow()"> 
 
    <label for="tab2">Tab 2</label> 
 
    
 
    <input id="tab3" type="radio" name="tabs" onclick="contentShow()"> 
 
    <label for="tab3">Tab 3</label> 
 
    
 
    <input id="tab4" type="radio" name="tabs" onclick="contentShow()"> 
 
    <label for="tab4">Tab 4</label> 
 
    
 
    <input id="tab5" type="radio" name="tabs" onclick="contentShow()"> 
 
    <label for="tab5">Tab 5</label> 
 
    
 
    <input id="tab6" type="radio" name="tabs" onclick="contentShow()"> 
 
    <label for="tab6">Tab 6</label> 
 
    
 
    <input id="tab7" type="radio" name="tabs" onclick="contentShow()"> 
 
    <label for="tab7">Tab 7</label> 
 
    
 
    <input id="tab8" type="radio" name="tabs" onclick="contentShow()"> 
 
    <label for="tab8">Tab 8</label> 
 
    
 
    <input id="tab9" type="radio" name="tabs" onclick="contentShow()"> 
 
    <label for="tab9">Tab 9</label> 
 
    
 
    <section id="content1"> 
 
\t <p hidden>yoo man</p> 
 
    <p> 
 
     Content 1 
 
    </p> 
 
    </section> 
 
    
 
    <section id="content2"> 
 
    <p> 
 
     Content 2 
 
    </p> 
 
    </section> 
 
    
 
    <section id="content3"> 
 
    <p> 
 
     Content 3 
 
    </p> 
 
    </section> 
 
    
 
    <section id="content4"> 
 
    <p> 
 
     Content 4 
 
    </p> 
 
    </section> 
 
    
 
    <section id="content5"> 
 
    <p> 
 
     Content 5 
 
    </p> 
 
    </section> 
 
    
 
    <section id="content6"> 
 
    <p> 
 
     Content 6 
 
    </p> 
 
    </section> 
 
    
 
    <section id="content7"> 
 
    <p> 
 
     Content 7 
 
    </p> 
 
    </section> 
 
    
 
    <section id="content8"> 
 
    <p> 
 
     Content 8 
 
    </p> 
 
    </section> 
 
    
 
    <section id="content9"> 
 
    <p> 
 
     Content 9 
 
    </p> 
 
    </section> 
 
    
 
    
 
</main>

正如你可以看到，點擊一個單選按鈕，觸發功能......

什麼功能通過單選按鈕的每個實例確實是循環（我在這個例子中簡單地使用input）。然後我看看單選按鈕是否被選中（它會是）。然後根據已檢查過的單選按鈕的id＃獲取相應的內容section，並顯示該內容 - 同時隱藏可能從前次點擊中可見的任何其他內容sections。

使用這種方法，您可以添加儘可能多的單選按鈕/內容部分，只要你喜歡。

這裏有一個小提琴太：https://jsfiddle.net/LLbvr2gh/2/