Olein-jp
11/25/2019 - 4:03 AM

jQueryでタブを実装

<ul class="information-tabs">
	<li class="information-tabs__item is-active">tab1</li>
	<li class="information-tabs__item">tab2</li>
	<li class="information-tabs__item">tab3</li>
</ul>
<ul class="information-contents">
	<li class="information-contents__item is-show">Content1</li>
	<li class="information-contents__item">Content2</li>
	<li class="information-contents__item">Content3</li>
</ul>
jQuery(function($){
  $( '.information-tabs__item' ).click(function(){
     $( '.is-active' ).removeClass( 'is-active' );
     $(this).addClass( 'is-active' );
     $( '.is-show' ).removeClass( 'is-show' );

     const index = $(this).index();

     $( '.information-contents__item' ).eq(index).addClass( 'is-show' );
  });
});
.information-tabs {
  &__item {
    &.is-active {
      
    }
  }
}
.information-contents {
  &__item {
    &.is-active {
      
    }
  }
}