Как вариант, можно вручную указать каким контентом управляет таб, тогда достаточно одного обработчика. Прятать предыдущий можно по селектору.
<!DOCTYPE html>
<html>
<head>
<style>
span{
display: inline-block;
margin-right: 10px;
}
.content{
width: 130px;
}
.none{
display: none;
}
</style>
</head>
<body>
<div class="tabs">
<span class='tab' data-content="0">Tab1</span>
<span class='tab' data-content="1">Tab2</span>
<span class='tab' data-content="2">Tab3</span>
</div>
<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 contentWrap = document.querySelector(".content");
var content = document.querySelectorAll(".c");
var tabs = document.querySelector(".tabs");
tabs.addEventListener( "click", function(e) {
contentWrap.querySelector( "div:not(.none)" ).classList.add("none")
content[ e.target.getAttribute("data-content") ].classList.remove("none")
} )
</script>
</body>
</html>