CSSUI タブ サンプル

HTMLとCSSのみで作成。JavaScriptは未使用。

タブ1の内容を表示しています。
タブ2の内容を表示しています。
タブ3の内容を表示しています。 
<link rel="stylesheet" href="cssui/cssui.css">
<link rel="stylesheet" href="cssui/tabs/tabs.css">

<div data-tabs>
  <input checked="checked" id="tab1" type="radio" name="tab" data-tab="tab1">
  <input id="tab2" type="radio" name="tab" data-tab="tab2">
  <input id="tab3" type="radio" name="tab" data-tab="tab3">
  <nav>
    <label for="tab1" data-tab-label="tab1" role="tab">タブ1</label>
    <label for="tab2" data-tab-label="tab2" role="tab">タブ2</label>
    <label for="tab3" data-tab-label="tab3" role="tab">タブ3</label>
  </nav>
  <section data-tab-panel="tab1" role="tabpanel" aria-labelledby="tab1">
    タブ1の内容を表示しています。
  </section>
  <section data-tab-panel="tab2" role="tabpanel" aria-labelledby="tab1">
    タブ2の内容を表示しています。
  </section>
  <section data-tab-panel="tab3" role="tabpanel" aria-labelledby="tab1">
    タブ3の内容を表示しています。
  </section>
</div>

元記事を表示する