タブ切り換え

/* HTML <div class="tab"> <ul class="tab-menu"> <li class="selected"><a href="#" data-tabid="1">XXX</a></li> <li><a href="#" data-tabid="2">XXX</a></li> <li><a href="#" data-tabid="3">XXX</a></li> </ul><!-- /.tab-menu --> <div class="tab-contents"> <div data-contentid="1"> <p>XXXXXXXXXXXXX</p> </div> <div class="hidden" data-contentid="2"> <p>XXXXXXXXXXXXX</p> </div> <div class="hidden" data-contentid="3"> <p>XXXXXXXXXXXXX</p> </div> </div> </div><!-- /.tab --> */ /* CSS .tab-menu { border-bottom: 6px solid #b9d5dc; } .tab-menu > li { float: left; } .tab-contents .hidden { display: none; } */ $(function(){ /* デリゲート：イベントハンドラをイベント発生要素の「親要素」に設定する機能 ・追加時に新たな要素にイベントハンドラを設定しなくて済む ・メモリの節約 → イベントハンドラは1つ設定するごとにメモリを消費する */ $('.tab-menu').on('click', 'li > a', function(event) { // デリゲート無しの場合 $('.tab-menu li > a').on('click', function(event) { event.preventDefault(); // クリックでページ最上部へ移動しないよう、<a>のデフォルト挙動を抑制 var $this = $(this); // クリックした<a>を取得 // ボタンのアピアランス（外観）を変更する $this.parent().siblings() // 兄弟要素を全て返す → liを取得 .removeClass('selected') // 要素からクラス（.selected）を削除 .end() // 直前のトラバースをキャンセルして、ひとつ前の状態に戻す $this.parent().siblings() → $this.parent() .addClass('selected'); // 要素にクラスを追加 // コンテンツを切り換える var tabid = $this.data('tabid'); // クリックされた<a>のdata-tabid属性の値を代入 // closest：開始要素から最も近い親要素を取得。引数にセレクタ指定で、マッチする最も近い親要素を返す // children：直接の子要素のみを取得 $this.closest('.tab').find('.tab-contents').children() .each(function() { // 取得している要素全てに()に記述した関数を１度だけ実行 var $content = $(this); if ($content.data('contentid') === tabid) { $content.removeClass('hidden'); } else { $content.addClass('hidden'); } }); }); });