<ul class="tab-menu">
  <li class="active"><a href="#">First</a></li>
  <li><a href="#">Second</a></li>
  <li><a href="#">Third</a></li>
</ul>

@import url(https://fonts.googleapis.com/css?family=Lato:400,500);

body {
  font-family: 'Lato';
  text-align: center;
}

ul {
  list-style: none;
  display: inline-block;
  padding: 0;
  margin: 0;
  margin: 100px;
  background-color: #222;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 2px;
  li {
    display: block;
    float: left;
    position: relative;
    margin: 2px;
    transition:.65s;
    &.active {
      background-color: #fff;
      a, a:hover, &:focus {
        opacity: 1;
        color: #222;
      }
    }
    a {
      position: relative;
      display: block;
      padding: 5px 40px;
      color: #999;
      opacity: .5;
      &:hover, &:focus {
        text-decoration: none;
        color: #999;
        opacity: 1;
      }
    }
  }
}
View Compiled
var li = document.getElementsByTagName("li");

for (var i = 0; i < li.length; i++) {
  li[i].addEventListener("click", function() {
    for (var j = 0; j < li.length; j++) {
      li[j].removeAttribute("class", "active");
      this.setAttribute("class", "active");
    }
  });
}

External CSS

  1. //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.