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>
