Simple Tab Content

index.html

<div class="wrapper">
  <div class="tabs clearfix">
    <div class="tab"><a class="active" href="#" rel="first-tab-content">First</a></div>
    <div class="tab"><a href="#" rel="second-tab-content">Second</a></div>
  </div>

  <div class="contents">
    <div id="first-tab-content" class="content show">
      First Tab
    </div>
    <div id="second-tab-content" class="content">
      Second Tab
    </div>
  </div>
</div>

script.js

$(document).ready(function() {
  
  $(".tab a").on('click', function(e) {
    
    // Remove class 'active' from all tabs
    $(".tab a").removeClass("active");
    // Set class 'active' to this tab
    $(this).addClass("active");
    
    // Hide all tab content
    $(".content").removeClass("show");
    // Match rel attribute with content id
    var tab_content = $(this).attr("rel");
    $("#" + tab_content).addClass("show");
    
    // Prevent href redirect
    event.preventDefault();
    
  });
  
}); // doc.ready

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Simple Tab Content.markdown

Simple Tab Content

A Pen by Kosal on CodePen.

License.

style.css

html,
body {
  padding: 0;
  margin: 0;
  font-family: arial, sans;
  font-size: 13px;
  text-align: center;
  box-sizing: border-box;
}

body * {
  box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.wrapper {
  position: relative;
  margin: 60px auto;
  width: 400px;
  text-align: left;
}

.wrapper .tab {
  position: relative;
  float: left;
}

.wrapper .tab a {
  display: block;
  padding: 12px;
  background-color: #EEEEEE;
  color: #555555;
  text-decoration: none;
}

.wrapper .tab a:hover {
  background-color: #DCDCDC;
}

.wrapper .tab a.active {
  background-color: #BBBBBB;
  color: #000000;
}

.contents {
  padding: 22px;
  background-color: #BBBBBB;
}

.contents .content {
  display: none;
}

.contents .content.show {
  display: block!important;
}