<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 {
}
}
}