Изменить цвет выбранной вкладки, jQuery

Question

У меня есть вкладка (bootstrap <ul>). Я хочу выделить цвет связанного элемента jquery.
вот мой HTML

<ul class="nav navbar-nav"> 
        <li class="active"><a href="index.html">Home</a></li> 
        <li id="aboutus">@Html.ActionLink("About Us", "aboutus","home")</li> 
        <li id="service">@Html.ActionLink("Services", "Services", "home")</li> 
        <li id="portfolio">@Html.ActionLink("Portfolio", "portfolio", "home")</li> 
    </ul> 

мой вопрос, как я могу изменить цвет элемента, который выбирается пользователем?

Answer 1

Проблема в том, что каждый раз, когда вы переходите на другую страницу и обновляется навигационная панель, она всегда выбирает первый <li> как активный. Используя jQuery, вы можете получить URL-адрес текущей страницы и посмотреть, какая из ссылок имеет этот адрес как href и добавить к нему активный класс. Удалите активную ссылку из первого элемента в раскрывающемся списке и используйте jQuery для добавления активного класса.

Markup

<ul class="nav navbar-nav"> 
    <li><a href="index.html">Home</a></li> 
    <li id="aboutus">@Html.ActionLink("About Us", "aboutus","home")</li> 
    <li id="service">@Html.ActionLink("Services", "Services", "home")</li> 
    <li id="portfolio">@Html.ActionLink("Portfolio", "portfolio", "home")</li> 
</ul> 

JQuery

<script> 
    $(document).ready(function() { 
     var activeLink = location.pathname.substr(location.pathname.lastIndexOf('/'), location.pathname.length); 
     var parent = $('a[href$="' + activeLink + '"]').parent('li'); 
     if (parent.closest('ul').hasClass('dropdown-menu')) { 
      parent.parents('.dropdown').addClass('active'); 
     } 
     parent.parent('li').addClass('active'); 
    }); 
</script> 

Этот дополнительный <ul> чеки используются, если Navbar имеют выпадающие с большим количеством ссылок внутри него.