Edit in JSFiddle

var tabs = document.getElementsByClassName("tab");
var contents = document.getElementsByClassName("content-tab-item");
function ShowTab(tab, content){
  var i;
  var tabs = document.getElementsByClassName("tab");
  var contents = document.getElementsByClassName("content-tab-item");
  var tabclick = document.getElementById(tab);
  var contentsclick = document.getElementById(content);
  for(i = 0; i < tabs.length; i++){
    tabs[i].classList.remove("active");
    contents[i].classList.remove("active-tab");
  }
  tabclick.classList.add("active");
  contentsclick.classList.add("active-tab");
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div class="tab-menu">
  <a class="tab active" id="tabA" onclick="ShowTab('tabA','contentA')">Title A</a>
  <a class="tab" id="tabB" onclick="ShowTab('tabB', 'contentB')">Title B</a>
  <a class="tab" id="tabC" onclick="ShowTab('tabC','contentC')">Title C</a>
</div>

<div class="content-tab">
  <div class="content-tab-item active-tab" id="contentA">
    <h2>Content TabA</h2>
  </div>
  <div class="content-tab-item" id="contentB">
    <h2>Content TabB</h2>
  </div>
  <div class="content-tab-item" id="contentC">
    <h2>Content TabB</h2>
  </div>
</div>
* {
  font-family: 'Roboto', sans-serif;
}
.tab-menu {
  margin-top: 20px;
}
.tab {
  padding: 10px 20px;
  background: #304FFE;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}
.tab+.tab {
  margin-left: 10px;
}
.active {
  opacity: 0.5;
}
.content-tab-item {
  display: none;
}
.active-tab {
  display: inline-block;
}