Skip to content

Instantly share code, notes, and snippets.

@AntonLitvin
Last active January 11, 2020 11:49
Show Gist options
  • Save AntonLitvin/06a68bf82ec9007b4d20c23854f48017 to your computer and use it in GitHub Desktop.
Save AntonLitvin/06a68bf82ec9007b4d20c23854f48017 to your computer and use it in GitHub Desktop.
HTML:
<div class="wrapper">
<div class="tabs">
<span class="tab">Вкладка 1</span>
<span class="tab">Вкладка 2</span>
<span class="tab">Вкладка 3</span>
</div>
<div class="tab-content">
<div class="tab-item">Содержимое 1</div>
<div class="tab-item">Содержимое 2</div>
<div class="tab-item">Содержимое 3</div>
</div>
</div>
jQuery:
$('.tab-item').not(':first').hide();
$('.wrapper .tab').on('click', function() {
$('.wrapper .tab').removeClass('active').eq($(this).index()).addClass('active');
$('.tab-item').hide().eq($(this).index()).fadeIn();
}).eq(0).addClass('active');
CSS:
.wrapper .active { color: red; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment