如何将这个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/