今回、jQueryによるタブの切り替えの方法について、備忘録的に記載していきます。
HTML
まずは、表示させるHTML部分のコードです。
タブ部分のul要素と表示するコンテンツ部分のul要素の2つを作成します。
qiita.html
<ulclass="tabs"><liclass="active">タブ１</li><li>タブ２</li><li>タブ３</li><li>タブ４</li></ul><ulclass="contents"><liclass="active">サッカー</li><li>バスケ</li><li>野球</li><li>バレー</li></ul>CSS
次はCSSの記述です。
タブ部はactiveクラスが付与されているタブのみ色を変化させます。
またコンテンツ部は非表示にし、activeクラスが付与されている要素のみを表示する仕様です。
qiita.css
.tabs{overflow:hidden;}.tabsli{background:#ccc;padding:5px25px;float:left;margin-right:1px;}.tabsli.active{background:#eee;}.contentsli{display:none;}.contents.active{padding:20px;display:block;}ul{list-style:none;}jQuery
最後にjQueryの記述です。
クリックされたタブに対して、タブ部とコンテンツ部の両方にactiveを付与します。
qiita.js
$('.tab li').click(function(){varindex=$('.tabs li').index(this);$('.contents li').removeClass('active');$('.contents li').eq(index).addClass('active');$('.tabs li').removeClass('active');$(this).addClass('active')});今回は、index()メソッドを用いて何番目のタブがクリックされたかを判別し、
その番号と同じ順番にあるコンテンツ部の要素にactiveを付与する処理にしました。