将活动类动态添加到引导菜单并打开其页面

Posted 2023-02-22

【中文标题】将活动类动态添加到引导菜单并打开其页面

【英文标题】：Add active class dynamically to bootstrap menu and opening its page

【发布时间】：2014-10-05 00:37:32

【问题描述】：

这是我使用bootstrap为导航栏创建的html代码。

<div id="menu">
    <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">videos</a></li>
        <li><a href="#">Comment</a></li>
        <li><a href="#">About</a></li>
        <li ><a href="contact_us.html">Contact</a></li>
    </ul>
</div>

现在我需要在该页面打开时为菜单项动态添加 li 的 active 类。

我只是检查了这两个 *** 问题：one | two

但我想不通。

这是我的 javascript -

$('#menu > ul.navbar-nav li').click(function(e) 
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) 
        $this.addClass('active');
    
    e.preventDefault();
);

希望有人能帮助我。 谢谢。

【问题讨论】：

你在$('.navbar li.active').removeClass('active');有问题应该是$('.navbar-nav li.active').removeClass('active');

也不需要if，因为您要在点击处理程序中删除active 类 - jsfiddle.net/arunpjohny/tj38Lv63/1

现在活动类正在添加到菜单项。但其对应的页面没有加载...

【参考方案1】：

为什么不完全改变班级的风格？

使用 javascript 轻松完成：

document.getElementsByClassName('classname').style.property.value

【参考方案2】：

最近，我遇到了同样的问题。我想动态添加active 类、aria-current 标记，并在我单击不同页面时更改页面的title。 下面是我的 html 导航栏：

<div class="navbar-nav">
    <a class="nav-link active" aria-current="page" href="index.php">Home</a>
    <a class="nav-link" href="flyers.php">Flyers</a>
    <a class="nav-link" href="promotions.php">Promotions</a>
    <a class="nav-link" href="grocery.php">Grocery</a>
    <a class="nav-link" href="contact.php">Contact</a>
</div>

jquery 使用 .each() 函数遍历所有 <a> 标记（a[href*=".php"] 选择所有具有 href 属性且包含 .php 的 <a> 标记）。然后，它检查页面的 url includes 是否是当前页面的特定 href（使用 window.location），这表明它已被点击。如果是，则从所有链接中删除active 类和aria-current 属性，然后将其添加到当前页面。它还获取标题的文本，并将其添加到 title 标记中。

$(document).ready(function() 
    $('.navbar-nav a[href*=".php"]').each(function() 
        if (String(location).includes($(this).attr('href'))) 
            $('a.nav-link.active').removeAttr('aria-current');
            $('a.nav-link.active').removeClass('active');
            $(this).addClass('active');
            $(this).attr('aria-current', 'page');
            document.title = $(this).text().trim();
        
    );
);

【讨论】：

非常感谢，太棒了

【参考方案3】：

我写这篇文章是因为我发现标签索引实际上并没有更改指向另一个文件的链接，而是应用了 css。

代码：

$('#home a:contains("Home")').parent().addClass("active");

在我的环境中根本不起作用，后来有点挠头并设计了这个。

解决方案： 获取路径名并用“/”分割 示例网址：https://example.com/microsite/map.html 将产生这样的列表（基于示例 url 和设置，即服务器上的微型站点具有自己的 html 文件）： ,microsite, map.html 长度为 3 获取项目并切换值：

    $(function()
      let pathParts = window.location.pathname.split(/);
      let yourLink = pathParts[2] // in this example
      switch(yourLink)
         case: 'index.html':
         $('a:contains("Home")').parent().addClass("active");
         break;
         case: 'about.html':
         $('a:contains("About")').parent().addClass("active");   
         break;
         default:
         $('a:contains("Home")').parent().addClass("active"); 
         // if yourLink is empty then default to the home page
         
     );

【参考方案4】：

由于您使用的是 Bootstrap，请包含默认的 javascript 插件 bootstrap.js 或缩小的 bootstrap.min.js 您可以通过添加 来动态激活菜单项>data-toggle="tab" 像这样的 li 元素

<div id="menu">
    <ul class="nav navbar-nav">
        <li data-toggle="tab"><a href="index.html">Home</a></li>
        <li data-toggle="tab"><a href="#">Gallery</a></li>
        <li data-toggle="tab"><a href="#">videos</a></li>
        <li data-toggle="tab"><a href="#">Comment</a></li>
        <li data-toggle="tab"><a href="#">About</a></li>
        <li data-toggle="tab"><a href="contact_us.html">Contact</a></li>
    </ul>
</div>

如官方文档中所写，查看here

您无需编写任何 JavaScript 即可激活选项卡或药丸导航，只需在元素上指定 data-toggle="tab" 或 data-toggle="pill"。将 nav 和 nav-tabs 类添加到标签 ul 将应用 Bootstrap 选项卡样式，而添加 nav 和 nav-pills 类将应用药丸样式。

【参考方案5】：

这是我的解决方案

$(document).ready(function () 
    $('.nav li a').click(function() 
        var $this = $(this);
        $this.parent().siblings().removeClass('active').end().addClass('active');
    );
);

无需使用任何 id 包装导航。

【参考方案6】：

解决方案很简单，不需要服务器端或ajax，只需要jQuery和Bootstrap。在每个页面上添加 ID 到 -body- 标记。使用该 ID 查找包含页面名称的 -a- 标记（-a- 标记的值）。

例子：

page1.html

<body id="page1">
<ul class="nav navbar-nav">
 <li><a href="page1.html">Page1</a></li>
 <li><a href="page2.html">Page2</a></li>
</ul>
<script src="script.js"></script>
</body>

page2.html

<body id="page2">
<ul class="nav navbar-nav">
 <li><a href="page1.html">Page1</a></li>
 <li><a href="page2.html">Page2</a></li>
</ul>
<script src="script.js"></script>
</body>

script.js

    $(function () 
        $("#page1 a:contains('Page1')").parent().addClass('active');
        $("#page2 a:contains('Page2')").parent().addClass('active');
     );

非常感谢本！ YouTube

【讨论】：

如果你打算走这条路，你可以选择纯 CSS 解决方案，而不是依赖 JS。将 ID 和 HREF 类添加到您的声明中。只要您的页面 ID 和唯一的导航链接类是静态的，这将起作用。

【参考方案7】：

你可以试试这个（DEMO）：

$('#menu > ul.nav li a').click(function(e) 
    var $this = $(this);
    $this.parent().siblings().removeClass('active').end().addClass('active');
    e.preventDefault();
);

顺便说一句，您应该定位 <a> 而不是 li。您可能需要检索 href 值，$(this).attr('href') 将返回它，但无论如何您都可以这样做。

此外，这只会处理突出显示 active 项目，但您需要添加代码以加载点击的页面，并希望您会使用 ajax 来执行此操作，并且您知道该怎么做。

更新：

如果您想正常加载单击的项目/页面（不使用JavaScript/ajax），则需要删除e.preventDefault()，但在这种情况下，此代码不会突出显示活动的li，您需要这样做从服务器端和其他 3 个答案也根据您当前的问题给出，即突出显示当前单击的项目，您没有提及有关页面加载的任何内容，我假设您正在使用 ajax 进行此操作，其他人也是如此（我想是的）。

Ajax 更新：

$('#menu > ul.nav li a').click(function(e) 
    var $this = $(this);
    $this.parent().siblings().removeClass('active').end().addClass('active');
    e.preventDefault();

    // Load the page content in to element
    // with id #content using ajax (There are other ways)
    $('#content').load($this.href());
);

在jQuery website 上了解更多信息。

【讨论】：

这不是关于打开页面，你没有在你的问题中提到它。

为什么在添加此代码后停止页面加载？

您没有编写任何 (ajax) 代码来加载页面，e.preventDefault() 正在停止正常加载页面，但如果您删除它，则活动项目将不会使用突出显示这段代码。

是的，我可以从服务器端做到这一点。但在这里我正在寻找使用 jquery 的解决方案。你能告诉我一个如何使用ajax 的例子吗？

在这种方法中，不加载整页，只有一部分加载到#content。不是吗？

【参考方案8】：

工作 Js：

$(document).ready(function () 
        $('ul.nav > li').click(function (e) 
            e.preventDefault();
            $('ul.nav > li').removeClass('active');
            $(this).addClass('active');                
        );            
    );

DEMO Bootstrap Navbar

我用过：

$('ul.nav > li').removeClass('active');

代替：

$('.navbar li.active').removeClass('active');

将这些行添加到一个页面：

var test = $(this).find("a");
test.trigger('click');

更新

这个也有效：window.location.href=$(this).find("a").attr('href');

setTimeout(function()
       window.location.href=$(this).find("a").attr('href');
,1000);//redirection after interval

【讨论】：

这个添加类但不打开它的页面

这可能会加载页面，但不会突出显示活动项目，因为页面将被刷新，然后无法跟踪单击的项目。

你确定@WereWolf-TheAlpha 但 OP 应该使用后端代码来设置活动链接。 ajax 也是一个选项。让它决定OP。

你能给我看一个ajax的例子吗，我从来没有用过ajax。

如果选择导航栏元素，演示代码会非常慢。由于这个原因，我几乎投了反对票。

【参考方案9】：

我认为这条线会解决问题

你在说

$('.navbar li.active').removeClass('active');

但是没有任何元素具有 .navbar 类，你应该说 .nav。

$('.nav li.active').removeClass('active');

DEMO