Question

以下选择器允许我显示四个选项卡，但我想要显示5,6和更多的通用代码。是否有另一种方法可以为任意数量的选项卡编写此CSS代码？（我更喜欢只有CSS的解决方案。）

＆＃13;

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

＆＃13;

  <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>

＆＃13;

这是一个带有完整演示的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解决方案供你查看，因为你说如果需要的话你可以选择...... < / p>

＆＃13;

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";
    }
  }
}

＆＃13;

*, *: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;
  }
}

＆＃13;

<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">
	  <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>

＆＃13;

如您所见，单击单选按钮会触发功能...

该功能的作用是遍历单选按钮的每个实例（在本例中我简单地使用了input）。然后我看看是否选中了单选按钮（它将是）。然后，我根据已选中的单选按钮的ID＃获取相应的内容section并显示该内容，同时还隐藏了之前点击中可能显示的任何其他内容sections

使用这种方式，您可以根据需要添加任意数量的单选按钮/内容部分。

这里也是一个小提琴：https://jsfiddle.net/LLbvr2gh/2/

如何将此ID选择器重写为类或常规选择器？

2 个答案: