超簡単jQuery！タブ切り替えメニュー｜タブメニュー

2019/7/2 2020/9/2 HTML, CSS, jQuery(JavaScript)

新着情報のカテゴリ分けとかでよくあるタブの切り替えの実装方法を紹介します。

デモ1

この二つさえ入れておけばactiveクラスが正常についてくれます。

あとはCSSでactiveクラスが付いた時にボタンの表示を変えたり、表示ブロックの出し分けをすればOK。

HTML

jQuery部分のクラスさえ合っていれば動きます。

            <ul class="tab_list">
              <li class="tab_label active"><span>タブ1</span></li>
              <li class="tab_label"><span>タブ2</span></li>
              <li class="tab_label"><span>タブ3</span></li>
              <li class="tab_label"><span>タブ4</span></li>
            </ul>
            <ul class="tab_panel active">
              <li><a href="#"><span>コメントコメントコメント</span></a></li>
            </ul>
            <ul class="tab_panel">
              <li><a href="#"><span>コメントコメントコメント</span></a></li>
            </ul>
            <ul class="tab_panel">
              <li><a href="#"><span>コメントコメントコメント</span></a></li>
            </ul>
            <ul class="tab_panel">
              <li><a href="#"><span>コメントコメントコメント</span></a></li>
            </ul>

</ul>

<li><a href="#">コメントコメントコメント</a></li>

</ul>

<li><a href="#">コメントコメントコメント</a></li>

</ul>

<li><a href="#">コメントコメントコメント</a></li>

</ul>

<li><a href="#">コメントコメントコメント</a></li>

</ul>

jQuery

<script>
$(".tab_label").on("click",function(){
	var $th = $(this).index(); //ここで何番目が押されたのか判別出来る。
	$(".tab_label").removeClass("active");
	$(".tab_panel").removeClass("active");
	$(this).addClass("active");
	$(".tab_panel").eq($th).addClass("active");
});
</script>