Simple JQuery Tabs

simple-tab-example.html

<!-- CSS -->
<style>
  .tab-content {
    display: none;
  }
  .tab-content.active {
    display: block;
  }
</style>
<!-- JS // Requires Jquery -->
<script>
  $('.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');
  });
</script>

<!-- 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>

<!-- Fin -->