How to make menu transitions active in ucoz?

Question

HTML

Hello. There is a site on the site ucoz. At the "top" of the site is the code:

<!-- start header -->
 <header>
 <div class="navbar navbar-default navbar-static-top">
 <div class="container">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="$HOME_PAGE_LINK$"><img src="/img/headerlogo.jpg"/></a>
 </div>
 <div class="navbar-collapse collapse ">
 <ul class="nav navbar-nav">
 <li class="active"><a href="$HOME_PAGE_LINK$">Главная</a></li>
 <li><a href="/index/">Кресла</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">Каталог<b class=" icon-angle-down"></b></a>
 <ul class="dropdown-menu">
 <li><a href="/index/</a></li>
 <li><a href="/index/</a></li>
 <li><a href="/index/</a></li>
 <li><a href="/index/</a></li>
 </ul>
 </li>
 <li><a href="#">О компании</a></li>
 <li><a href="#">Контакты</a></li>
 </ul>
 </div>
 </div>
 </div>
 </header>
 <!-- end header -->

How to change the property of menu links to active depending on the page? Now on the Main, then if I go to the Catalog, then it should be at the link with the catalog, etc. Thanks

Answer 1

Probably with the help of js - look at the current document.location.pathname and, depending on it, add class="active" to the desired link