jquery add. Active to bootstrap navbar

Question

У меня есть некоторые проблемы с моим существующим jQuery, когда дело доходит до добавления . Active класса к элементу NavStart Bootstrap на основе параметров URL-адреса браузера.

Проблема заключается в том, что index.php даст активный класс для элемента navbar, соответствующего index.php, но если индекс index.php не присутствует, элемент не будет отображаться как активный, такая же проблема возникает при передаче запроса ,

Например, inbox.php даст . Active класс, в то время как inbox.php? View = sent ничего не даст.

Вот какой jQuery может помочь мне исправить эту крошечную проблему с index.php и/не отображать . Active и те же ссылки, содержащие параметры запроса для одной и той же страницы.

$(document).ready(function() { 
     var url = window.location; 
     $('ul.nav a[href="'+ url +'"]').parent().addClass('active'); 
     $('ul.nav a').filter(function() { 
      return this.href == url; 
     }).parent().addClass('active'); 
}); 

. Структура .nav - это настройка по умолчанию Bootstrap, ничего необычного. Я попытался использовать PHP для добавления . Active класс, но по какой-то причине он не хотел хорошо играть, и я использовал код, который находится в StackOverflow относительно PHP, и добавляет . Active.

Заранее спасибо.

Answer 1

Предполагая, что все ваши страницы имеют путь, похожий на .../myPage.ext?x=y, где ext является любым данным расширением страницы т.е. php, html, etc., следующий фрагмент кода получает текущую страницу, удаляет строку запроса, если какие-либо путь разделения window.location на '?' и получает имя текущей страницы, затем он ищет nav-bar для <a></a> с соответствующими href. Очень похоже на то, что вы делаете.

<script> 
    $(document).ready(function() { 
     // Let's get rid of the query string 
     var path = location.pathname.split('?')[0]; 
     var start = path.lastIndexOf('/'); 
     var activeLink = path.substr(start); 

     var parent = $('a[href*="' + activeLink + '"]').parent('li'); 
     // These two lines check if you have dropdowns in your nav-bar 
     if (parent.closest('ul').hasClass('dropdown-menu')) { 
      parent.parents('.dropdown').addClass('active'); 
     } 
     parent.addClass('active'); 
    }); 
</script>