Simple Tabs

index.jade

.tabs__container
  ul.tabs__list
    li.tabs__tab
      a.active(href="#tab__1") Tab 1
    li.tabs__tab
      a(href="#tab__2") Tab 2
    li.tabs__tab
      a(href="#tab__3") Tab 3!!!!
.tabs-content__container
 .tabs-content__item#tab__1
   | Tab contents
 .tabs-content__item#tab__2
   | More tab contents
 .tabs-content__item#tab__3
   | This is the third tab

script.js

$(document).ready(function() {
  $('.tabs__tab a').click(function(event) {
    event.preventDefault();
    $('.tabs__tab a').removeClass('active');
    $(this).addClass('active');
    $('.tabs-content__item').hide();
    $($(this).attr('href')).show();
  });
})

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

Simple Tabs.markdown

Simple Tabs

A Pen by Christopher Dowson on CodePen.

License.

style.scss

@mixin clearfix() {
  & {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.4rem;
  margin: 5rem;
}

.tabs__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  @include clearfix();
  .tabs__tab {
    float: left;
    a {
      width: auto;
      display: block;
      padding: 1rem;
      background-color: #ececec;
      margin: {
        top: 0.5rem;
      };
      font-size: 1.2rem;
      color: #353535;
      text-decoration: none;
      box-sizing: border-box;
      border: 
        {
          top: 1px solid #dededc;
          left: 1px solid #dededc;
          right: 1px solid #dededc;
          }
      &.active {
        margin: {
          top: 0;
        }
        background-color: #fafafa;
        
        padding: {
          top: 1.5rem;
        }
      }
    }
  }
}

.tabs-content__container {
  position: relative;
}

.tabs-content__item {
  &:nth-of-type(n+2) {
    display: none;
  }
}

.tabs-content__container
{
  padding: 1rem;
  border: 1px solid #dededc;
  box-sizing: border-box;
}