jQueryで作るシンプルタブ

2012.8.25

jQueryでタブは、かなりメジャーな処理の1つですが、作る度に調べていて結構時間の無駄だったので、現在の自分なりのタブ機能の実装コードをメモしておきます。

確認環境

• jQuery1.7.2

コード

タブ01
タブ02
タブ03



中身01中身01中身01中身01中身01
中身01中身01中身01中身01中身01
中身01中身01中身01中身01中身01
中身01中身01中身01中身01中身01
中身01中身01中身01中身01中身01
中身01中身01中身01中身01中身01




中身02中身02中身02中身02中身02
中身02中身02中身02中身02中身02
中身02中身02中身02中身02中身02
中身02中身02中身02中身02中身02
中身02中身02中身02中身02中身02
中身02中身02中身02中身02中身02




中身03中身03中身03中身03中身03
中身03中身03中身03中身03中身03
中身03中身03中身03中身03中身03
中身03中身03中身03中身03中身03
中身03中身03中身03中身03中身03
中身03中身03中身03中身03中身03

簡単に解説

• クリックしたaタグを反応させないために、e.preventDefault()を追加。参考記事
• ユーザビリティを考慮して、できるだけjavascriptだけで制御するようにする。とくにCSSでコンテンツに対してdisplay:none;をしてしまうと、javascriptを切った状態ではコンテンツを見ることができなくなってしまうので、それは避ける。
• 要素の指定を何度も使いそうなもの、要素指定が長ったらしくなりそうなものは、最初に変数に入れてしまうと後のコードがすっきりするかも。

サンプル

サンプルはこちらから