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

Question

我从 css tricks 网站上抓取了一个简单的选项卡控件，它对我来说非常有用，除了当我在同一页面上有两个选项卡控件时，单击底部控件只会更改顶部控件的选项卡页面。

带有原始代码的 CSS Tricks 页面 is here

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

重命名第二组中每个选项卡的 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>