CSS3:CSSだけで作るタブUI

goto_jp 1,929views 更新:2014年2月3日

本題に入る前に簡単な基礎から。
下記のHTMLを前提とします。

<ul class="list">
  <li><input name="r" id="r1" type="radio"/><label for="r1">リスト1</label></li>
  <li><input name="r" id="r2" type="radio"/><label for="r2">リスト2</label></li>
  <li><input name="r" id="r3" type="radio"/><label for="r3">リスト3</label></li>
</ul>

注意としては<input>を<label>の中に入れず、隣接させる点です。

下記CSSで、チェックした<input>に隣接する<label>のスタイルを変えます。

.list input[type=radio]:checked + label {
  background: #ccc;
}

これだけだと何ということないスタイルですが、JSを必要としないスイッチになるので、ようやく本題になりますが下記のようなこともできるようになります。

http://jsdo.it/goto_jp/ujJp

ポイントは下記のセレクタのように、「checkedの隣接の隣接の…」と数珠つなぎにできる点です。

input[type=radio]:checked + label + .contents {}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません