CSS

【CSS】CSSのみでタブ実装tabsPureCss

June 18, 2017
tabsPureCss

tabsPureCssはCSSのみでタブ実装。

HTML


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

    <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">
         
        </div>
        <div id="tab-two-panel" class="panel">
          
        </div>
        <div id="tab-three-panel" class="panel">
           
        </div>
        <div id="tab-four-panel" class="panel">
            
    </div>

</div>