动态添加活动类到Bootstrap菜单并打开页面

Question

动态添加活动类到Bootstrap菜单并打开页面

5

这是我用 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类。我查看了这两个stackoverflow问题：一个 | 二，但我还是无法弄清楚。这是我的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();
});

希望有人能帮我解决问题。谢谢。

- user3733831

1

你在 $('.navbar li.active').removeClass('active'); 遇到了问题，正确应该是 $('.navbar-nav li.active').removeClass('active');。 - Arun P Johny

也没有必要使用 if，因为您正在单击处理程序中删除 active 类 - http://jsfiddle.net/arunpjohny/tj38Lv63/1/ - Arun P Johny

现在活动类别已添加到菜单项中，但对应的页面没有加载... - user3733831

9个回答

4

解决方案很简单，不需要服务器端或ajax，你只需要使用jQuery和Bootstrap。在每个页面上给-body-标签添加ID。使用该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');
     });

感谢Ben！YouTube

- Filip Gjorgjevikj

1

如果你要选择这种方法，可以选择纯CSS解决方案，而不是依赖JS。在你的声明中添加IDs和HREF类。只要你的页面IDs和唯一的导航链接类是静态的，这将起作用。 - Roralee

4

您可以尝试这个（演示）：

$('#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，其他人也这样认为。

$('#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官网上了解更多相关IT技术的内容。

- The Alpha

1

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

为什么在添加了这段代码后页面停止加载？ - user3733831

1

你没有编写任何(ajax)代码来加载页面，而e.preventDefault()正在阻止正常加载页面，但如果你删除它，那么使用这段代码将无法突出显示活动项目。 - The Alpha

是的，我可以从服务器端完成它。但是在这里，我正在寻找使用jQuery的解决方案。您能否向我展示如何使用ajax来实现这一点的示例？ - user3733831

在这个方法中，它不会加载整个页面，只会加载到 #content 的一部分。是吗？ - user3733831

是的，你说得对，你应该在服务器端完成它，祝一切顺利 :-) - The Alpha

2

我认为这行代码可以解决问题。

你的意思是

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

但是没有一个具有类名 .navbar 的元素，你应该使用 .nav。

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

DEMO

- Mritunjay

1

最近，我遇到了同样的问题。我想在点击不同的页面时动态添加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"] 选择所有带有包含 .php 的 href 属性的 <a> 标签）。然后，它检查页面的 url 是否 包含 当前页面的特定 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();
        }
    });
});

- Samex

0

为什么不彻底改变类的样式呢？

使用JavaScript很容易实现：

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

- Wolfgang

0

工作中的Js：

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

演示 Bootstrap 导航栏

我已经使用了：

$('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

- Manwal

这将添加类但不打开其页面。 - user3733831

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

当然可以，@WereWolf-TheAlpha，但是OP应该使用后端代码来设置活动链接。ajax也是一个选项。让OP自己决定。 - Manwal

你能给我展示一个 AJAX 的例子吗？我从未使用过 AJAX。 - user3733831

如果您选择导航栏元素，演示代码非常缓慢。因此我差点给它投了反对票。 - stephen

0

这是我的解决方案

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

不需要用任何ID来包装导航栏。

- HTML Man

0

我写了这篇文章，因为我发现tab index实际上并没有改变链接到另一个文件，而只是应用了css。

代码：

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

在我的环境中根本不起作用，经过一番思考后，我想出了这个解决方案。

解决方案：获取路径名并按“/”拆分示例网址：https://example.com/microsite/map.html 将得到一个列表（基于示例网址和设置，即服务器上的微站点及其自己的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
         }
     });

- user3242800

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

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

- Jinhai ZHOU · Accepted Answer

如果您正在使用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>

根据官方文档所述，可在此链接中查看。

你可以通过在元素上简单地指定data-toggle="tab"或data-toggle="pill"来激活选项卡或胶囊式导航，而无需编写任何JavaScript代码。将nav和nav-tabs类添加到选项卡ul中将应用Bootstrap选项卡样式，而将nav和nav-pills类添加到其中将应用胶囊样式。