simple tabs

tabs.html

<ul class="tabs">
  <li><a href="#tab1" class="active">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
</ul> 
<div class="tab active" id="tab1">
  <!-- tab 1 content -->
</div>
<div class="tab" id="tab2">
  <!-- tab 1 content -->
</div>

tabs.js

function tabs(container){
  $(container).find(".tabs").on("click", "li > a", function(e){
    e.preventDefault();
    $(".tab").removeClass("active");
    $(".tabs").find("a").removeClass("active");
    var targetTab = $(this).attr("href");
    $(targetTab).addClass("active");
    $(this).addClass("active")
  });
}

$(function() {  
  tabs("body");
});  

tabs.scss

.tabs {
  overflow: hidden;
  &>li {
    display: inline-block;
    vertical-align: top;
    &>a {
      display: inline-block;
      text-decoration: none;
      color: #272727;
      padding: 10px 15px;
      margin-right: 5px;
      border-radius: 5px 5px 0 0;
      background: #fff;
      position: relative;
      z-index: 10;
      &.active {
        background: #f1f1f1;
      }
    }
  }
}
 
.tab {
  display: none;
  margin-top: -1px;
  position: relative;
  z-index: 5;
  &.active {
    display: block;
  }
}