How to highlight active menu item in navbar after page is re-loaded

Question

Bootstrap 3 navbar menu is defined using code below. If item is selected from menu, new page is loaded from server. Same bootstrap menu appears in every page. However dropdown which is not used to select menu, is not highlighted.

How to force bootstrat to higlight last selected menu item automatically if local storage is allowed: store last selected item in local storage. If new page is loaded, get last clicked menu item name and highlight it by addding active class into it.

Doint it in server reqiures changing generated menu by adding active class to proper item dynamically. How to implement this without such change ? ASP.NET MVC4 is used in server side. Maybe jquery+localstorage in browser or some simple ASP.NET MVC4 solution is available.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href='#' class="dropdown-toggle" data-toggle="dropdown">Dropdown 1</a>
          <ul class="dropdown-menu" role="menu">
            <li><a href='somepage'>Action11</a></li>
            <li><a href='somepage'>Action12</a></li>
            <li><a href='somepage'>Action13</a></li>
          </ul>
        </li>

        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown">Dropdown 2</a>
          <ul class="dropdown-menu" role="menu">
            <li><a href='somepage'>Action121</a></li>
            <li><a href='somepage'>Action122</a></li>
            <li><a href='somepage'>Action123</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Update

Menu contains dropdowns with query parameters as show below. In this case in code in Alexander Solonik answer _str value is # always and urlpath is always DoklstlG So nothing is highlighted. How to fix ?

<nav class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav" id="menu">
                <li class='dropdown'>
<a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button'>Pad1
</a>
<ul class='dropdown-menu' role='menu'>

<li><a href='/admin/?_user=admin&_company=1'>Bar1</a></li><li><a id='menu_DoklstlG' tabindex='-1' entity='DoklstlG' href='/admin/Grid/Index/DoklstlG?_user=admin&_company=1' title='Ctrl+E'>Option1</a></li>

<li><a id='menu_DoklstlO' tabindex='-1' entity='DoklstlO' href='/admin/Grid/Index/DoklstlO?_user=admin&_company=1'>Ostuarve</a>

...

Answer 1

I had a similar problem and wrote the following script:

var _urlpath = $(location).attr('pathname').split('/').pop();

    $('#menu > li').each(function(){
        var _this = $(this);
        var _str = _this.find('a').attr('href');
        _str !== _urlpath ? _this.removeClass('active') : _this.addClass('active');
    });

It's fairly simple, filter the url path name, store it in a variable, and then most importantly, when a new page is loaded, loop through all the li's and try and match the url hash (I don't know the exact terminology, sorry) to the , hash in the li > a's.

There might be a better way of doing this.

P.S. you might need to modify the code a bit.