M o o v i x

Размещено: 18 октября 2022 в Блог

Выделение активного пункта меню при помощи JS

В меню ul li, при верстке часто так случается, что в cms нет функции определения активного меню.

т.е. та страница, на которой мы в данный момент находимся должна быть выделена в меню навигации.

 

Например:

<nav class="menu">
  <ul>
	<li><a href="">Ссылка 1</a></li>
	<li><a class="active" href="">Ссылка 1</a></li>
    - где этот пункт является активным
	<li><a href="">Ссылка 2</a></li>
  </ul>
</nav>
 

Решение:

К такому меню подключаем JavaScript:

<script>
$(function () {                                      // Когда страница загрузится
$('.menu a').each(function () {             // получаем все нужные нам ссылки
var location = window.location.href; // получаем адрес страницы
var link = this.href;                // получаем адрес ссылки
if(location == link) {               // при совпадении адреса ссылки и адреса окна
$(this).addClass('active');  //добавляем класс
}
});
});</script>
 

 

Этот JS автоматически берет активную текущую ссылку и выделяет ее классом active