多個「worko的選項卡」上的單頁

Question

我在看這個CodePen：

https://codepen.io/josh_vogt/pen/EaaZbP

<div class="worko-tabs"> 

    <input class="state" type="radio" title="tab-one" name="tabs-state" id="tab-one" checked /> 
    <input class="state" type="radio" title="tab-two" name="tabs-state" id="tab-two" /> 
    <input class="state" type="radio" title="tab-three" name="tabs-state" id="tab-three" /> 
    <input class="state" type="radio" title="tab-four" name="tabs-state" id="tab-four" /> 

    <div class="tabs flex-tabs"> 
     <label for="tab-one" id="tab-one-label" class="tab">Tab One</label> 
     <label for="tab-two" id="tab-two-label" class="tab">Tab Two</label> 
     <label for="tab-three" id="tab-three-label" class="tab">Tab Three</label> 
     <label for="tab-four" id="tab-four-label" class="tab">Tab Four</label> 


     <div id="tab-one-panel" class="panel active"> 
      <h3>Responsive CSS Tabs - Flexbox</h3> 
      <p>CSS only tabs built using flexbox, when the viewport drops below 600px wide the tabs turn into an accordion by chaging the flex order of the elements.</p> 
     </div> 
     <div id="tab-two-panel" class="panel"> 
      Tab two content 
     </div> 
     <div id="tab-three-panel" class="panel"> 
      Tab three content 
     </div> 
     <div id="tab-four-panel" class="panel"> 
      Tab four content 
     </div> 
    </div> 

</div> 

/* Android 2.3 :checked fix */ 
@keyframes fake { 
    from { 
    opacity: 1; 
    } 
    to { 
    opacity: 1; 
    } 
} 
body { 
    animation: fake 1s infinite; 
} 

.worko-tabs { 
    margin: 20px; 
    width: 80%; 
} 
.worko-tabs .state { 
    position: absolute; 
    left: -10000px; 
} 
.worko-tabs .flex-tabs { 
    display: flex; 
    justify-content: space-between; 
    flex-wrap: wrap; 
} 
.worko-tabs .flex-tabs .tab { 
    flex-grow: 1; 
    max-height: 40px; 
} 
.worko-tabs .flex-tabs .panel { 
    background-color: #fff; 
    padding: 20px; 
    min-height: 300px; 
    display: none; 
    width: 100%; 
    flex-basis: auto; 
} 
.worko-tabs .tab { 
    display: inline-block; 
    padding: 10px; 
    vertical-align: top; 
    background-color: #eee; 
    cursor: hand; 
    cursor: pointer; 
    border-left: 10px solid #ccc; 
} 
.worko-tabs .tab:hover { 
    background-color: #fff; 
} 

#tab-one:checked ~ .tabs #tab-one-label, 
#tab-two:checked ~ .tabs #tab-two-label, 
#tab-three:checked ~ .tabs #tab-three-label, 
#tab-four:checked ~ .tabs #tab-four-label { 
    background-color: #fff; 
    cursor: default; 
    border-left-color: #69be28; 
} 

#tab-one:checked ~ .tabs #tab-one-panel, 
#tab-two:checked ~ .tabs #tab-two-panel, 
#tab-three:checked ~ .tabs #tab-three-panel, 
#tab-four:checked ~ .tabs #tab-four-panel { 
    display: block; 
} 

@media (max-width: 600px) { 
    .flex-tabs { 
    flex-direction: column; 
    } 
    .flex-tabs .tab { 
    background: #fff; 
    border-bottom: 1px solid #ccc; 
    } 
    .flex-tabs .tab:last-of-type { 
    border-bottom: none; 
    } 
    .flex-tabs #tab-one-label { 
    order: 1; 
    } 
    .flex-tabs #tab-two-label { 
    order: 3; 
    } 
    .flex-tabs #tab-three-label { 
    order: 5; 
    } 
    .flex-tabs #tab-four-label { 
    order: 7; 
    } 
    .flex-tabs #tab-one-panel { 
    order: 2; 
    } 
    .flex-tabs #tab-two-panel { 
    order: 4; 
    } 
    .flex-tabs #tab-three-panel { 
    order: 6; 
    } 
    .flex-tabs #tab-four-panel { 
    order: 8; 
    } 

    #tab-one:checked ~ .tabs #tab-one-label, 
    #tab-two:checked ~ .tabs #tab-two-label, 
    #tab-three:checked ~ .tabs #tab-three-label, 
    #tab-four:checked ~ .tabs #tab-four-label { 
    border-bottom: none; 
    } 

    #tab-one:checked ~ .tabs #tab-one-panel, 
    #tab-two:checked ~ .tabs #tab-two-panel, 
    #tab-three:checked ~ .tabs #tab-three-panel, 
    #tab-four:checked ~ .tabs #tab-four-panel { 
    border-bottom: 1px solid #ccc; 
    } 
} 

我想使用在多個位置的選項卡相同的HTML頁面。到目前爲止我嘗試過的所有東西都沒有奏效。

我已經在頁面上的一個地方工作正常的標籤，但不是在多個地方。

我感謝任何幫助。我的大腦今天沒有清楚地思考。

*更新*

這是我到目前爲止有：http://codepen.io/_thomas/pen/MpvEEX

Answer 1

你說你感動部3,4出來。您還需要

頂部

<input class="state" type="radio" title="tab-one" name="tabs-state" id="tab-one" checked /> 
<input class="state" type="radio" title="tab-two" name="tabs-state" id="tab-two" /> 
<input class="state" type="radio" title="tab-three" name="tabs-state" id="tab-three" /> 
<input class="state" type="radio" title="tab-four" name="tabs-state" id="tab-four" /> 

每個選項卡組需要有自己的名字固定無線電集團。

和

確保標籤搬出與標籤內容的部分。

<label for="tab-three" id="tab-three-label" class="tab">Tab Three</label> 
<label for="tab-four" id="tab-four-label" class="tab">Tab Four</label>