JS:
var links = [].slice.call(document.querySelectorAll('.links__link'));
var blocks = [].slice.call(document.querySelectorAll('.blocks__block'));
function resetBlocks () {
blocks.map(function(block){
block.classList.remove('active');
});
}
links.map(function(link){
link.addEventListener('click', function() {
resetBlocks();
var target = document.querySelector(link.getAttribute('data-target'));
target.classList.add('active');
});
});
HTML:
<div class="blocks">
<div class="blocks__block blocks__block_1 active">BLOCK 1</div>
<div class="blocks__block blocks__block_2">BLOCK 2</div>
<div class="blocks__block blocks__block_3">BLOCK 3</div>
</div>
<div class="links">
<a class="links__link links__link_1" data-target=".blocks__block_1">Link 1</a>
<a class="links__link links__link_2" data-target=".blocks__block_2">Link 2</a>
<a class="links__link links__link_3" data-target=".blocks__block_3">Link 3</a>
</div>
CSS:
.blocks__block {
display: none;
}
.blocks__block.active {
display: block;
}
Demo:
https://codepen.io/dalisoft/pen/GdoQRm 
