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

Question

我从css技巧网站抓取了一个简单的标签控件，它对我很有用，除非我在同一页面上有两个标签控件，单击底部控件只需更改顶部控件的标签页。

CSS Tricks页面，其中包含原始代码is here

更改第二组的name =属性并不能解决问题。

重命名第二组中每个标签的ID也不适合。

有没有办法在同一页面上有两个独立操作的标签？

FWIW HTML和CSS非常简单：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

要更改的部分是label和id：

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

我已编辑了您的代码段。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;