Сохранить элемент меню после нажатия ссылки на текущей странице

Question

В принципе, я пытаюсь добавить класс active в текущий пункт меню. Мне удалось использовать следующий код jQuery.

jQuery(document).ready(function($){ 
     var path = window.location.href; 
     $('#nav-main li a').each(function() { 
      if (this.href === path) { 
       $(this).addClass('active'); 
      } 
     }); 
    }); 

Моя навигационная панель выглядит следующим образом:

<ul id="nav-main"> 
     <li> 
      <a href="/">Home</a> 
     </li> 
     <li> 
      <a href="/brands">Brands</a> 
     </li> 
     <li> 
      <a href="/users">Users</a> 
     </li> 
     <li> 
      <a href="/employees">Employees</a> 
     </li> 
    </ul> 

Который имеет следующий CSS:

ul#nav-main { 
     width: 1050px; 
     margin: 0 auto; 
     color: #fff; 
    } 
    ul#nav-main li { 
     margin: 0 5px 0 5px; 
     list-style-type: none; 
     text-align: center; 
     display: inline-block; 
     font-size: 17px; 
    } 
    ul#nav-main li a { 
     padding: 0 15px; 
     line-height: 2.692307692; 
     display: inline-block; 
     text-decoration: none; 
     color: #fff; 
    } 
    ul#nav-main li a:hover { 
     background-color: rgba(0, 0, 0, 0.3); 
    } 
    ul#nav-main li a.active { 
     background-color: rgba(0, 0, 0, 0.3); 
    } 

Теперь, когда я нажимаю на 'Пользователи' Я хожу в /users и JQuery код успешно добавляет класс active, так что «Пользователи» отображается как текущий пункт меню на панели навигации. Однако, когда я нажимаю ссылку на странице «Пользователи», которая приводит, например, к /users/view/12345 (в которой 12345 - это идентификатор пользователя), страница «Пользователи» больше не отображается в качестве текущего элемента меню.

Я думаю, что это связано с тем, что код jQuery выглядит только nav-main li a, а не другим a на странице. Есть ли что-то, что я могу добавить к моему коду jQuery, чтобы сделать эту работу?

Answer 1

Попробуйте изменить

var path = window.location.href; 

к этому:

var path = "/" + window.location.pathname.split('/')[1]; 

pathname извлекает все после того, как (и в том числе) первый слэш. split будет разбивать строку на список строк на основе определенного разделителя ('/'), и мы собираемся выбрать элемент с индексом 1.

Answer 2

Попробуйте этот. Работал для меня. Найди его где-то в сети, но не помню источник.

var i = document.location.href.lastIndexOf("/"); 
var current = document.location.href.substr(i+1); 

    $("#nav-main a").removeClass('active'); 

    $("#nav-main a[href^='"+current+"']").each(function(){ 
     $(this).addClass('active'); 
    });