Cacher is the code snippet organizer for pro developers

var $tabNav = $('.tab-nav li'),
    $tabContents = $('.tab-contents'),
    activeClass = 'is-active';

$tabNav.parent().find(':first').addClass(activeClass).show();
$tabContents.not(':first').hide();
$tabNav.find('a').on('click', function() {
  $tabNav.removeClass(activeClass);
  $(this).parent().addClass(activeClass);
  $tabContents.hide();
  $($(this).attr('href')).show();
  return false;
});

<ul class="tab-nav">
  <li><a href="#tab1">tab 1</a></li>
  <li><a href="#tab2">tab 2</a></li>
  <li><a href="#tab3">tab 3</a></li>
</ul>
<div id="tab1" class="tab-contents">
  tab1 contents ...
</div>
<div id="tab2" class="tab-contents">
  tab2 contents ...
</div>
<div id="tab3" class="tab-contents">
  tab3 contents ...
</div>