DivMan,
<!DOCTYPE html>
<html>
<head>
<style>
span{
display: inline-block;
margin-right: 10px;
}
.content{
width: 130px;
}
.none{
display: none;
}
</style>
</head>
<body>
<span class='tab'>Tab1</span>
<span class='tab'>Tab2</span>
<span class='tab'>Tab3</span>
<div class="content">
<div class="c">aaaa a aaaaa aaaaaa a a a a aaaaaa aaaaaa aaaaa</div>
<div class="c none">bbbb bbbb bbbbb bbbb bbbb bbbbb bbbb bbbbb bbbb bbbbb</div>
<div class="c none">ccc ccccc cccccc ccccc cccccc ccccc ccccc</div>
</div>
<script>
var tabs = document.querySelectorAll(".tab");
var con = document.querySelectorAll(".c");
var temp = con[0];
[].forEach.call(tabs, function(item, i) {
item.addEventListener("click", function() {
temp.classList.add("none");
temp = con[i];
temp.classList.remove("none")
})
});
</script>
</body>
</html>