HTML CSSのタブコントロール - 同じページの複数のタブコントロール

Question

CSSのトリックサイトからシンプルなタブコントロールを取得して、同じページに2つのタブコントロールがある場合を除き、トップコントロールのタブページを変更します。名前を変更し、元のコードで

CSSトリックページはis here

=第二グループの属性は、それを修正しません。

2番目のグループの各タブのIDの名前を変更することもできません。

同じページに2つのタブが独立して表示される方法はありますか？

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>