DEMO Bootstrap Navbar

Question

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

<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的{{1}}类。

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

但我无法弄清楚这一点。

这是我的javascript -

active

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

Answer 1

由于您使用的是Bootstrap，包括defult 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

您可以通过在元素上指定data-toggle =“tab”或data-toggle =“pill”来激活制表符或精选导航，而无需编写任何JavaScript。将nav和nav-tabs类添加到选项卡ul将应用Bootstrap选项卡样式，而添加nav和nav-pills类将应用丸样式。

Answer 2

您可以尝试此操作（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()，但在这种情况下，此代码不会突出显示有效{{1}并且您需要从服务器端执行此操作，并且还根据您当前的问题给出了其他3个答案，该问题是关于突出显示当前单击的项目，您没有提及有关页面加载的任何内容而我假设您正在执行此操作使用li，其他人也是如此（我想是这样）。

Ajax更新：

ajax

在jQuery website上了解详情。

Answer 3

我认为这一行将解决问题

你在说

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

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

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

DEMO

Answer 4

解决方案很简单，无需从服务器端或ajax，您只需要jQuery和Bootstrap。在每个页面上添加ID到-body-tag。使用该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

Answer 5

最近，我遇到了同样的问题。我想动态添加 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 使用 <a> 函数遍历所有 .each() 标签（a[href*=".php"] 选择具有 <a> 属性的所有 href 标签包含一个 .php )。然后，它检查页面的 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();
        }
    });
});

Answer 6

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

使用javascript轻松完成：

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

希望这会有所帮助：）

Answer 7

工作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

Answer 8

这是我的解决方案

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

无需使用任何ID包裹导航。

Answer 9

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

代码：

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

在我的环境中根本没有工作，后来有点头疼，并设计了这个。

解决方案：获取路径名并将其拆分为＆＃34; /＆＃34; 示例网址：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
         }
     });

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

9 个答案:

更新

Ajax更新：

DEMO Bootstrap Navbar

更新