Как выделить активную ссылку в меню другим цветом при нажатии?

164

13 ноября 2019, 15:30

Подскажите как выделить активную ссылку в меню другим цветом при нажатии? Есть меню в html на странице следующего вида:

$(document).ready(function() { 
  $('#main_menu ul.menu_other_page li').on('click', function() { 
    $('#main_menu ul.menu_other_page li a span').removeClass('parent'); //заберет актив у всех ссылок 
    $(this).addClass('act'); //присвоит нужной 
  }); 
});

.act { 
  color: green !important; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="main_menu"> 
 
  <ul class="nav menu_other_page"> 
    <li class="item-102 parent"> 
      <a href=""><img src="/images/top-menu-bg-lp.png" alt=""><span class="image-title">Двери</span></a> 
    </li> 
    <li class="item-103 parent"> 
      <a href=""><img src="/images/top-menu-bg-zk.png" alt=""><span class="image-title">Окна</span></a> 
    </li> 
    <li class="item-104 current active parent"> 
      <a href=""><img src="/images/top-menu-bg-gp.png" alt=""><span class="image-title">Освещение</span></a> 
    </li> 
    <li class="item-235 parent"> 
      <a href=""><img src="/images/top-menu-bg-ae.png" alt=""><span class="image-title">Мебель</span></a> 
    </li> 
  </ul>

Но js код не работает, активная ссылка должна быть зеленого цвета

Answer 1

Есть много способов.
Определять ссылку, передавать ссылку.. Что удобнее.

Я как-то делал вот такое:

$(document).ready(function(){ 
  let thisPage = location.href; // Получаем ссылку. 
  thisPage = 'http://www.site.com/link3'; // Т.к. код работает в сниппете, то "эмулируем" ссылку. 
  thisPage = thisPage.replace(/http:\/\/www.site.com/g, ''); // Удаляем домен, оставив только саму страницу. 
  $('.nav a').each(function(){ // Пробегаем по всем ссылкам в меню 
    let thisHref = $(this).attr('href'); // Получаем ссылку 
    if(thisHref == thisPage) $(this).addClass('active'); // если совпадает с текущей ссылкой, то вешаем класс active 
  }); 
});

ul {padding: 0; margin: 0;} 
li {display: inline-block; background: #ddd;} 
a.active {background: green; color: white;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<ul class="nav"> 
  <li> 
    <a href="/link1">Link 1</a> 
  </li> 
  <li> 
    <a href="/link2">Link 2</a> 
  </li> 
  <li> 
    <a href="/link3">Link 3</a> 
  </li> 
  <li> 
    <a href="/link4">Link 4</a> 
  </li> 
  <li> 
    <a href="/link5">Link 5</a> 
  </li> 
</ul>