Skip to content

Instantly share code, notes, and snippets.

@Olein-jp
Last active November 25, 2019 04:34
Show Gist options
  • Select an option

  • Save Olein-jp/9b5440083bd2e222f93b2e5a87a654b8 to your computer and use it in GitHub Desktop.

Select an option

Save Olein-jp/9b5440083bd2e222f93b2e5a87a654b8 to your computer and use it in GitHub Desktop.
<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 {
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment