<!-- Tabs -->
<a href="#" class="tab active" data-toggle-target=".tab-content-1">Tab 1</a>
<a href="#" class="tab" data-toggle-target=".tab-content-2">Tab 2</a>
<!-- Content -->
<div class="tab-content tab-content-1 active">
<h1>Tab Content 1</h1>
</div>
<div class="tab-content tab-content-2">
<h1>Tab Content 2</h1>
</div>.tab-content {
display: none;
}
.tab-content.active {
display: block;
} $('.tab').on('click', function(evt) {
evt.preventDefault();
$(this).toggleClass('active');
var sel = this.getAttribute('data-toggle-target');
$('.tab-content').removeClass('active').filter(sel).addClass('active');
});
External CSS
This Pen doesn't use any external CSS resources.