HTML CSS选项卡控件 - 同一页面上的多个选项卡控件

Question

我从css技巧站点抓取了一个简单的选项卡控件，它对我很好，除非在同一页面上有两个选项卡控件时，只需单击底部控件更改*控件的标签页。

与原代码is here

更改为第二组不能解决它的name =属性的CSS技巧页面。

重命名第二组中每个选项卡的ID也不适合它。

有没有办法在同一页面上有两个独立运行的选项卡？

FWIW HTML和CSS相当简单：

 .tabs { 
 
      position: relative; 
 
      min-height: 100px;  
 
      clear: both; 
 
      margin: 25px 0; 
 
     } 
 
     .tabs .tab { 
 
      float: left; 
 
     } 
 
     .tabs .tab label { 
 
      background: #eee; 
 
      padding: 5px 15px 5px 15px; 
 
      border: 1px solid #ccc; 
 
      position: relative; 
 
      left: 1px; 
 
      cursor: pointer; 
 
     } 
 
     .tabs .tab [type=radio] { 
 
      display: none; 
 
     } 
 
     .tabs .content { 
 
      position: absolute; 
 
      top: 18px; 
 
      left: 0; 
 
      background: white; 
 
      right: 0; 
 
      bottom: 0; 
 
      padding: 20px; 
 
      border: 1px solid #ccc; 
 
      overflow:auto; 
 
     } 
 
     .tabs [type=radio]:checked ~ label { 
 
      background: white; 
 
      border-bottom: 1px solid white; 
 
      z-index: 2; 
 
     } 
 
     .tabs [type=radio]:checked ~ label ~ .content { 
 
      z-index: 1; 
 
     }

<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"> 
 
       stuff1 
 
      </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"> 
 
       stuff2 
 
      </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"> 
 
       stuff3 
 
      </div> 
 
     </div> 
 
     
 
    </div> 
 

 
    <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"> 
 
       stuff4 
 
      </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"> 
 
       stuff5 
 
      </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"> 
 
       stuff6 
 
      </div> 
 
     </div> 
 
     
 
    </div>

Answer 1

的部分改变的是label和id：

<input type="radio" id="tab-1" name="tab-group-1" checked> 
<label for="tab-1">Tab One</label> 

我已经编辑您的片段。

 .tabs { 
 
      position: relative; 
 
      min-height: 100px;  
 
      clear: both; 
 
      margin: 25px 0; 
 
     } 
 
     .tabs .tab { 
 
      float: left; 
 
     } 
 
     .tabs .tab label { 
 
      background: #eee; 
 
      padding: 5px 15px 5px 15px; 
 
      border: 1px solid #ccc; 
 
      position: relative; 
 
      left: 1px; 
 
      cursor: pointer; 
 
     } 
 
     .tabs .tab [type=radio] { 
 
      display: none; 
 
     } 
 
     .tabs .content { 
 
      position: absolute; 
 
      top: 18px; 
 
      left: 0; 
 
      background: white; 
 
      right: 0; 
 
      bottom: 0; 
 
      padding: 20px; 
 
      border: 1px solid #ccc; 
 
      overflow:auto; 
 
     } 
 
     .tabs [type=radio]:checked ~ label { 
 
      background: white; 
 
      border-bottom: 1px solid white; 
 
      z-index: 2; 
 
     } 
 
     .tabs [type=radio]:checked ~ label ~ .content { 
 
      z-index: 1; 
 
     }

<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"> 
 
       stuff1 
 
      </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"> 
 
       stuff2 
 
      </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"> 
 
       stuff3 
 
      </div> 
 
     </div> 
 
     
 
    </div> 
 

 
    <div class="tabs"> 
 
     
 
     <div class="tab"> 
 
      <input type="radio" id="tab-4" name="tab-group-1" checked> 
 
      <label for="tab-4">Tab One</label> 
 
      
 
      <div class="content"> 
 
       stuff4 
 
      </div> 
 
     </div> 
 
     
 
     <div class="tab"> 
 
      <input type="radio" id="tab-5" name="tab-group-1"> 
 
      <label for="tab-5">Tab Two</label> 
 
      
 
      <div class="content"> 
 
       stuff5 
 
      </div> 
 
     </div> 
 
     
 
     <div class="tab"> 
 
      <input type="radio" id="tab-6" name="tab-group-1"> 
 
      <label for="tab-6">Tab Three</label> 
 
      
 
      <div class="content"> 
 
       stuff6 
 
      </div> 
 
     </div> 
 
     
 
    </div>