Active state not working in Bootstrap menu

[Zaffer]

Hi,

I am trying to set up a simple Bootstrap menu it works fine except the Active component doesn't work.  Meaning, when I load the page into a browser, I can click on the various links in my menu and the browser will take me there, but the "Active" display doesn't change.  I'm using bootstrap.css, jquery-1.11.2.min and bootstrap.js.  I even tried making a fresh HTML page and loading a fresh bootstrap menu into it -- no luck.  I'm at my wit's end, so any help will be much appreciated.  Here's my code, HTML and CSS.

<!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="defaultNavbar1">

      <ul class="nav navbar-nav">

        <li class="active">

            <a href="inside_page_1.html">Inside Page 1<span class="sr-only">(current)</span></a>

        </li>

       <li><a href="inside_page_2.html">Inside Page 2</a></li>

        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a>

          <ul class="dropdown-menu" role="menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li class="divider"></li>

            <li><a href="#">Separated link</a></li>

            <li class="divider"></li>

            <li><a href="#">One more separated link</a></li>

          </ul>

        </li>

      </ul>

.navbar-default .navbar-nav > .active > a,

.navbar-default .navbar-nav > .active > a:hover,

.navbar-default .navbar-nav > .active > a:focus {

    color: #00B309;

    background-color: #FF0004;

}

[Nancy OShea · Accepted solution]

It does work if you manually change the location of the active class on each page's menu.

Or you can do it with pure CSS code

Persistent Page Indicator on Menus - http://alt-web.com/

Or do it with JQuery code.

<script>

$(".nav a").on("click", function(){
  $(".nav").find(".active").removeClass("active");
  $(this).parent().addClass("active");
});

</script>

Nancy O.

[Zaffer]

Thanks Nancy O,  You have saved my sanity.  Thanks especially for giving me 3 methods.  I'll do it manually for now because I don't have a lot of pages, but it's great to know the two other methods are there. 

[Nancy OShea]

Persistent menu highlighting is important when using server-side includes for site wide nav.  And I use SSIs on 5 page sites as well as 50 pages sites.  

Nancy O.