【jQuery】同一ページ内の複数タブ機能を実装
HTMLをいじってるとタブを実装したい場面はよく出てきますよね、トップページのお知らせとか。
ページ内にタブ1つだと実装はかんたんなのですが、複数あると全てのタブの動きが連動しちゃうとか、1つはうまくいっているのにもう一方は表示されなくなったとか…
この悩みはけっこうかんたんに解決できるので紹介します。
※コードは該当部分のみ抜粋
※js部分はscriptタグでくくってhtmlに書いてもいいし、別ファイルにして読み込んでもOKです
【html】
<div class="news"> <h1>お知らせ</h1> <ul class="tabs"> <li class="tab current"><span>お知らせ1</span></li> <li class="tab"><span>お知らせ2</span></li> <li class="tab"><span>お知らせ3</span></li> <li class="tab"><span>お知らせ4</span></li> </ul> <div class="news_wrap"> <div class="scroll"> <div class="panel is-show">お知らせ1の内容</div> <div class="panel">お知らせ2の内容</div> <div class="panel">お知らせ3の内容</div> <div class="panel">お知らせ4の内容</div> </div> </div> </div> <div class="reqruit"> <h1>求人情報</h1> <ul class="tabs"> <li class="tab current"><span>求人情報1</span></li> <li class="tab"><span>求人情報2</span></li> <li class="tab"><span>求人情報3</span></li> <li class="tab"><span>求人情報4</span></li> </ul> <div class="news_wrap"> <div class="scroll"> <div class="panel is-show">求人情報1の内容</div> <div class="panel">求人情報2の内容</div> <div class="panel">求人情報3の内容</div> <div class="panel">求人情報4の内容</div> </div> </div> </div>
【js】
$(function(){ $('.tab').on('click',function(){ var idx=$('.tab').index(this); $(this).addClass('current').siblings('.tab').removeClass('current'); $(this).closest('ul').next('.news_wrap').find('.panel').removeClass('is-show'); $('.panel').eq(idx).addClass('is-show'); }); });
$(this)とsiblings()やnext()、find()を使って、動作させる.panel要素を限定しています。
これでタブがいくらあっても干渉し合うことはありません。
リンク