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

Posted 2023-05-08

【中文标题】重新加载页面后如何突出显示导航栏中的活动菜单项

【英文标题】：How to highlight active menu item in navbar after page is re-loaded

【发布时间】：2015-07-12 04:09:55

【问题描述】：

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

如果允许本地存储，如何强制引导程序自动突出显示最后选择的菜单项：将最后选择的项目存储在本地存储中。如果加载了新页面，获取最后点击的菜单项名称并通过添加active 类将其突出显示。

在服务器中添加它需要通过动态添加活动类到适当的项目来更改生成的菜单。 如何在没有这种变化的情况下实现这一点？ 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>

更新

菜单包含带有查询参数的下拉菜单，如下所示。 在这种情况下，在 Alexander Solonik 的代码中，答案 _str 值始终为 # 并且 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>

...

【参考方案1】：

我遇到了类似的问题，写了如下脚本：

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

相当简单，过滤url路径名，存入变量，然后最重要的是，当新页面加载完毕，循环遍历所有li，尝试匹配url hash（我不知道确切的术语，对不起）li > a 中的 ,​​ 哈希。

可能有更好的方法来做到这一点。

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

【讨论】：

我试过了，但它不适用于包含下拉栏和查询字符串的 Bootstrap3 菜单。我更新了问题。

我不得不用 $('#menu > ul > li') 替换 $('#menu > li') 然后它开始工作得很好而且很简单，只要你不做 server.transfer

这对解决我的问题很有帮助。谢谢！

【参考方案2】：

您可以在请求的操作中设置查看包值。之后，在构建菜单时创建一个逻辑来询问该值。

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

【讨论】：

这是很多工作。也许可以在客户端或其他类似解决方案中使用几行带有本地存储的 jquery 脚本？