jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 如何在重新加载页面后突出显示导航栏中的活动菜单项大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
使用以下代码定义Bootstrap 3导航栏菜单.
如果从菜单中选择了项目,则从服务器加载新页面.每页都会显示相同的引导菜单.
但是,不会突出显示未用于选择菜单的下拉列表.

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

通过动态地将活动类添加到适当的项目,在服务器中重新启动更改生成菜单.
没有这样的改变怎么实现呢?
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值是#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>

...

解决方法

我有类似的问题,并编写了以下脚本:

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中的哈希>一个.

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

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

大佬总结

以上是大佬教程为你收集整理的jquery – 如何在重新加载页面后突出显示导航栏中的活动菜单项全部内容,希望文章能够帮你解决jquery – 如何在重新加载页面后突出显示导航栏中的活动菜单项所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。