Result
今更感満載かもですが、いわゆるCSSオンリーのタブです。
:checkedと間接セレクタを使っています。
css
div{display: none;}
input[value='1']:checked ~ #one{ display: block;}
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
