如何在重新加载页面后突出显示导航栏中的活动菜单项

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.

使用以下代码定义Bootstrap 3导航栏菜单。如果从菜单中选择了项目,则从服务器加载新页面。每页都会显示相同的引导菜单。但是,不会突出显示未用于选择菜单的下拉列表。

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.

如果允许本地存储,如何强制bootstrat自动强制最后选择的菜单项:将最后选择的项存储在本地存储中。如果加载了新页面,请获取最后一次单击的菜单项名称,并通过向其中添加活动类来突出显示它。

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.

通过动态地将活动类添加到适当的项目,在服务器中执行更改生成菜单。没有这样的改变怎么实现呢? ASP.NET MVC4用于服务器端。也许浏览器中的jquery + localstorage或者一些简单的ASP.NET MVC4解决方案可用。

<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 ?

菜单包含带有查询参数的下拉列表,如下所示。在这种情况下,在Alexander Solonik的代码中,回答_str值是#always,而urlpath总是DoklstlG所以没有突出显示。怎么修 ?

<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>

...

2 个解决方案

#1

well 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');
    });

its 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 .

它相当简单,过滤url路径名,将其存储在变量中,然后最重要的是,当加载新页面时,循环遍历所有li并尝试匹配url哈希(我不知道确切的术语。对不起,在李> a的哈希。

Hope this help . alas , there might be a better way of doing this .

希望这有帮助。唉,可能有更好的方法来做到这一点。

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

附:您可能需要稍微修改一下代码。

#2

What you can do is set a view bag value in the requested action. After, make a logic to ask for that value when constructing the menu.

您可以做的是在请求的操作中设置视图包值。之后,在构造菜单时制作一个逻辑来询问该值。

I use that mechanism but using a actionfilter and using it for actions or controller annotation

我使用该机制,但使用actionfilter并将其用于操作或控制器注释

#1