Change color of navigation bar in MVC 4 template

Bootstrap + jQuery to change color of navigation bar in MVC 4

_Layout.cshtml

1. remove id=”menu” in <ul> tag

2. add class=“nav nav-pills” in <ul> tag

<nav>
    <ul class="nav nav-pills">
        <li><a href="/">Home</a>
        <li><a href="/Home/About">About</a>
        <li><a href="/Home/Contact">Contact</a>
    </li></ul>
</nav>

 

jQuery

$(function () {

    var path = window.location.pathname;

    //Method 1:
    var $a = $('nav ul li a[href="' + path + '"]');
    $a.parents("li:first").addClass("active");

    //Method 2:
    //$("nav ul li a").each(function (index, elem) {
    //    if ($(elem).attr("href") == path) {
    //        $(this).parents("li:first").addClass("active");
    //    }
    //});

});