javascript クリックでタブ切り替え

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript クリックでタブ切り替え相关的知识,希望对你有一定的参考价值。

<div class="ChangeElem_Btn_Content">
  <button class="ChangeElem_Btn">1番目のタブ</button>
  <button class="ChangeElem_Btn">2番目のタブ</button>
  <button class="ChangeElem_Btn">3番目のタブ</button>
</div>
<ul>
  <li class="ChangeElem_Panel">1番目のコンテンツ</li>
  <li class="ChangeElem_Panel">2番目のコンテンツ</li>
  <li class="ChangeElem_Panel">3番目のコンテンツ3</li>
</ul>
.ChangeElem_Panel{
  display: none;
}
$(function () {
  /*初期表示*/
  $('.ChangeElem_Panel').hide();
  $('.ChangeElem_Panel').eq(0).show();
  $('.ChangeElem_Btn').eq(0).addClass('is-active');
  /*クリックイベント*/
  $('.ChangeElem_Btn').each(function () {
    $(this).on('click', function () {
      var index = $('.ChangeElem_Btn').index(this);
      $('.ChangeElem_Btn').removeClass('is-active');
      $(this).addClass('is-active');
      $('.ChangeElem_Panel').hide();
      $('.ChangeElem_Panel').eq(index).show();
    });
  });
});

以上是关于javascript クリックでタブ切り替え的主要内容,如果未能解决你的问题,请参考以下文章

php 170831 cssのみでタブ切り替え

scss 170915【170831cssのみでタブ切り替え】実装

javascript メニューのタブ切り替え

javascript タブ切り替え中でheight-line,谷歌地图を使う

html シンプルなタブ切り替え(jQuery的)

php 20180516タブ切り替え内のマッチハイト