Weblasts

cssだけでもできる!タブ切り替えの実装方法

         

画像切り替えの記事で紹介したものを改良すると、タブ切り替えに転用できますということで、ここではcssだけでタブ切り替えを実装していきます。

やっぱりchecked疑似クラスを使っていきますので、そちらについては以下のリンク記事で詳しく紹介していますのでご覧ください。

タブ切り替えとは

タブ切り替えは、狭いスペースに情報を詰め込む時に重宝するコンポーネントのひとつで、yahooのトップにあるニュース部分が代表的な例だと思います。

今回作るサンプルを以下に用意しておきます

サンプル

HTMLに関する情報一覧です

  • HTMLの情報
  • HTMLの情報
  • HTMLの情報
  • HTMLの情報
  • HTMLの情報

CSSに関する情報一覧です

  • CSSの情報
  • CSSの情報
  • CSSの情報
  • CSSの情報
  • CSSの情報

JavaScriptに関する情報一覧です

  • JavaScriptの情報
  • JavaScriptの情報
  • JavaScriptの情報
  • JavaScriptの情報
  • JavaScriptの情報

タブ切り替え用HTMLの準備

cssだけでタブ切り替えをさせる時に必要な要素はいくつか考えられますが、今回はシンプルに用意してみました。

  • クリック判定用のラジオボタン
  • 切り替え用のタブ
  • タブによって表示する要素

これらの要素を全て兄弟要素として配置していけばHTMLは完成です。

input要素をまとめたくなる気持ちはよくわかりますが、全て兄弟要素として扱うことがキモなので我慢してください

「#check1」にチェックが有るときは「.tab_item1」と「.content1」が、「#check2」にチェックが有るときは「.tab_item2」と「.content2」が、「#check3」にチェックが有るときは「.tab_item3」と「.content3」がそれぞれ連動する形をとっていきます。

なお、「#check1」は予めチェックが入った状態にするため、checked属性を付けておきます。

ラジオボタンは同じname属性が付いたグループ内でどれかひとつしかチェックできないので、この仕組を利用します。

タブ切り替え用のcss

~を使ったセレクタが理解できる人であれば問題ないと思いますので、とりあえずコードをそのままペタッとしておきます。

今回のサンプルでは「#check1」にチェックが有るときは「.tab_item1」と「.content1」が、「#check2」にチェックが有るときは「.tab_item2」と「.content2」が、「#check3」にチェックが有るときは「.tab_item3」と「.content3」がそれぞれ連動する形にしたいので、このような形になります

borderとかcursorとか余計なものも入れていますが必要がなければ削っても問題はないです

コメントを入れてあるので参考にしていただければと思います