ラジオボタンでタブ実装

Ads

Result


今更感満載かもですが、いわゆるCSSオンリーのタブです。
:checkedと間接セレクタを使っています。

css

div{display: none;}/*非表示にしておく*/

input[value='1']:checked ~ #one{ display: block;}/*該当するradioボタンにチェックが入ったら表示に切り替え*/
input[value='2']:checked ~ #two{ display: block;}
input[value='3']:checked ~ #three{ display: block;}
input[value='4']:checked ~ #four{ display: block;}

html

<input type="radio" name="switch" value="1" checked="checked">
<input type="radio" name="switch" value="2">
<input type="radio" name="switch" value="3">
<input type="radio" name="switch" value="4">

<div id="one">foo</div>
<div id="two">bar</div>
<div id="three">hoge</div>
<div id="four">huga</div>

via

Basic CSS content switcher

タイトルとURLをコピーしました