Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8652

【簡単にできる】jQueryでのタブ切り替え

$
0
0

今回、jQueryによるタブの切り替えの方法について、備忘録的に記載していきます。

HTML

まずは、表示させるHTML部分のコードです。
タブ部分のul要素と表示するコンテンツ部分のul要素の2つを作成します。

qiita.html
<ulclass="tabs"><liclass="active">タブ1</li><li>タブ2</li><li>タブ3</li><li>タブ4</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を付与する処理にしました。


Viewing all articles
Browse latest Browse all 8652

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>