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

Question

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

jqueryasp.netasp.net-mvctwitter-bootstraptwitter-bootstrap-3

5

Bootstrap 3 导航菜单可通过以下代码定义。如果从菜单中选择项，将从服务器加载新页面。相同的 bootstrap 菜单出现在每个页面中。然而，未用于选择菜单的下拉菜单没有高亮显示。

如何强制 Bootstrap 自动突出显示最近选定的菜单项（如果允许使用本地存储）：将上次选择的项目存储在本地存储中。如果加载了新页面，则获取上次点击的菜单项名称并通过添加 active 类来突出显示它。

在服务器上执行此操作需要通过动态添加活动类到适当项目的生成的菜单来进行更改。是否有一种不需要这样更改的实现方法？在服务器端使用 ASP.NET MVC4。也许在浏览器中使用 jQuery+本地存储或一些简单的 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>

...

- Andrus

2个回答

0

你可以在请求的操作中设置一个 View Bag 值。之后，构建菜单时可以编写逻辑来请求该值。

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

- Leonardo Neninger

这是很多工作。也许可以使用几行jQuery脚本与客户端本地存储或其他类似的解决方案？ - Andrus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alexander Solonik · Accepted Answer

我遇到了类似的问题，写了以下脚本:

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哈希（我不知道确切术语，抱歉）与li > a中的哈希匹配。

可能有更好的方法。

顺便说一句，你可能需要稍微修改一下代码。