https://jsfiddle.net/ghvxk3sr/50/
var ListItem = document.querySelectorAll('.list__item');
var tab = document.querySelectorAll('.tab');
for(var i = 0; i < ListItem.length; i++){
ListItem[i].addEventListener('click', function(){
for(var u = 0; u < ListItem.length; u++){
ListItem[u].classList.remove('active');
tab[u].style.display = 'none';
}
})
this.classList.add('active');
tab[i].style.display = "block";
}
.list{
display: flex;
list-style-type: none;
justify-content: center;
}
.list__item{
margin-left: 30px;
}
a{
color: black;
text-decoration: none;
}
a:hover{
border-bottom: 1px solid #000;
}
.dn{
display: none;
}
.active {color: red; border-bottom: 1px solid #045acf}
<ul class="list">
<li class="list__item">
<a href="#">Лондон</a>
</li>
<li class="list__item">
<a href="#">Париж</a>
</li>
<li class="list__item">
<a href="#">Рим</a>
</li>
<li class="list__item">
<a href="#">Брюсель</a>
</li>
</ul>
<div class="tab dn">Лондон - 1111</div>
<div class="tab dn">Париж - 2222</div>
<div class="tab dn">Рим - 3333</div>
<div class="tab dn">Брюсель - 4444</div>