JSFiddle - React, Tailwind, and code Playground

HTML

<div id="block-menu">
<ul class="menu">


    <li><a class="anim-middleout" href="/glavnaya/">Главная</a></li><!--
 --><li><a class="anim-middleout" href="/novosti/">Новости</a></li><!---
 --><li><a class="anim-middleout" href="/pogoda/">Погода</a></li>




</ul>
</div>

CSS

.menu {
  list-style: none;
  margin-top: 25px;
}
.menu li {
  display: inline;
  padding-right: 25px;
  padding-left: 20px;
}
.menu li a {
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: none;
  color: black;
  padding: 10px;
  display: inline-block;

}
.anim-middleout:after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: #34495e;
  margin: auto;
  margin-top: 10px;
  transition: all .5s ease;
}

.active:after,
.anim-middleout:hover:after {
  width: 100%;
}

JavaScript

$('.menu').on('click', 'a', function() {
  $(this).closest('.menu').find('a').removeClass('active')
  $(this).addClass('active')
  
  return false // for test only, remove on prod
});