jqueryを使ってタブ切り替えのイベントを実装する方法

2020年7月29日 2020年7月29日

Webサイト内で、情報を分かりやすくまとめるために、タブ切り替えのBoxを実装することは、一つの手法であります。今回はそんなタブ切り替えについて、タブとターゲットとなる切り替えBoxが離れていても動作するタブ機能をJQueryを使って実装していきます。

今までタブ切り替えを実装したことがない方は、是非参考にしていただければと思います。

・jqueryでタブ切り替えを実装
・jqueryを使ってタブ切り替えのイベントを実装する方法まとめ

jqueryでタブ切り替えを実装

それではJQueryを使ったタブ切り替え機能の実装方法をお伝えします。
まずはHTML側から説明していきます。

タブ部分となるの下記HTMLコードを記載してください。

<ul class="tab">
	<li class="current">タブA</li>
	<li>タブB</li>
	<li>タブC</li>
	<li>タブD</li>
</ul>

次にタブ切り替えでターゲットとなる部分のHTMLコードを記載します。

<div class="tab-target">
    <!-- ここにタブ切り替えで表示するコンテンツを記述 -->
</div>
<div class="tab-target">
    <!-- ここにタブ切り替えで表示するコンテンツを記述 -->
</div>
<div class="tab-target">
    <!-- ここにタブ切り替えで表示するコンテンツを記述 -->
</div>

次にCSSを使って、非表示にしたい部分などを非表示にします。

.tab-target{ display: none;}
.tab-target.current{ display: block;}

最後に下記Javascriptコード（JQuery）を記述してください。

$(function(){
    $('.tab-target').eq(0).addClass('current');
    
    $('.tab li').click(function(){
        var index = $('.tab li').index(this);
        
        if($(this).hasClass('current')){
        }else{
            $('.tab li').removeClass('current');
            $(this).addClass('current');
            
            $('.tab-target').removeClass('current');
            $('.tab-target').eq(index).addClass('current');
        }
    });
});

これでJQueryを使ったタブ実装は完了です。
HTML側で記述しているクラス名を異なる状態で実装する場合には、Javascriptコードを一部変更してください。