tabs

tabs.coffee

  $(".tabs > li >  a").click (e) ->
    e.preventDefault()
    $(".tab").removeClass "active"
    $(".tabs > li > a").removeClass "active"
    targetTab = $(this).attr("href")
    $(targetTab).addClass "active"
    $(this).addClass "active"

tabs.js

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

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;
  }
}

tabs.slim

ul.tabs
  li
    a href="#projects-tab" class="active" Projects
  li
    a href="#people-tab" People
#projects-tab.tab.active
  // tab content
#people-tab.tab
 // tab content