<div id="tabs">
  <ul id="tabs-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> <!-- tabs-nav -->
  
  <div id="tabs-content">
    <div id="tab1" class="content">
      <h2>First</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate laboriosam libero quis maiores hic explicabo distinctio nesciunt alias! Distinctio ratione eligendi delectus natus accusamus iste laborum omnis qui eius quas.</p>
    </div>
    <div id="tab2" class="content">
      <h2>Second</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex soluta commodi velit similique quo officiis nulla aspernatur enim earum expedita ad sequi est harum laboriosam aperiam facilis aliquam perferendis. Voluptate.</p>
    </div>
    <div id="tab3" class="content">
      <h2>Third</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas sunt doloribus perspiciatis a cum alias adipisci laboriosam quibusdam ipsum eius veritatis asperiores labore quo hic assumenda laudantium excepturi repellendus ullam.</p>
    </div>
  </div> <!-- tabs-content -->
</div> <!-- Tabs -->
body {
  margin: 0;
  padding: 0;
  font: 1em Arial,sans-serif;
}
a {
  text-decoration: none;
}

/* Tabs */
#tabs {
  width: 600px;
  margin: 5em auto;
}

#tabs-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ccc;
  overflow: auto;
}

#tabs-nav li {
    float: left;
    font-size: 14px;
    font-weight:bold;
    margin-right: 6px;
    padding:6px 10px;
    border:1px solid #d5d5de;
    border-bottom:none;
    cursor:pointer;
  }
#tabs-nav li:hover,
li.active {
  background-color: #d5d5de;
}

.content {
  padding: 10px;
  border: 1px solid #d5d5de;
  border-top: none;
}
// show first content by default
$('#tabs-nav li:first-child').addClass('active');
$('.content').hide();
$('.content:first').show();

// click function
$('#tabs-nav li').click(function(){
  $('#tabs-nav li').removeClass('active');
  $(this).addClass('active');
  $('.content').hide();
  
  var activeTab = $(this).find('a').attr('href');
  $(activeTab).fadeIn();
  return false;
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js