Bootstrap CSS 活动导航

Question

在 Bootstrap 网站上，子导航栏会与各个部分匹配，并在您滚动到该部分时更改背景颜色。我想创建自己的菜单，不需要所有的背景颜色和其他东西，但是我修改了 CSS 以使其相似，但当我向下滚动或单击菜单项时，活动类别没有切换。不确定我做错了什么。

HTML：

<ul class="menu">
    <li><a href="#" aria-current="page">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

CSS:

.menu {
  list-style:none;
}
.menu > li {
  float: left;
}
.menu > li > a {
  color: #555;
  float: none;
  padding: 10px 16px 11px;
  display: block;
}
.menu > li > a:hover {
  color: #F95700;
}
.menu a[aria-current="page"],
.menu a[aria-current="page"]:hover {
  color:#F95700;
}

我检查了文件；jQuery、bootstrap.js和bootstrap.css都已正确链接。我需要添加额外的jQuery或者缺少一些CSS来使活动状态切换，就像他们网站上的子导航菜单一样吗？

- user1029779

Answer 1

由于您还需要清除其他内容，因此这是我最终得到的结果。

$('.navbar li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});

- David

---

请您发布完整上下文内容吗？哪个是导航栏，哪个是列表项？这个 JavaScript 代码块放在哪里？很抱歉，对我来说 JavaScript 非常难理解。 - Zennichimaro

如果默认的导航栏将“主页”设置为活动状态，当链接被点击且新页面正在加载时，您该如何保持新的li处于活动状态，即在不使用preventDefault()的情况下？ - Wold

我的问题是这样的。我看到在点击后，active 类被应用到 li 上，但链接没有改变。但是，如果我在点击时删除 e.preventDefault();，它会将 active 应用于 li，但在一秒钟内，active 类会移动到默认值，也就是 <li class="active">Home</li>。有什么想法吗？谢谢。 - Labanino

哇，你太棒了 :D - Juan Herrera

Answer 2

要切换类，您需要执行一些JavaScript。

在jQuery中：

$('.menu li a').click(function(e) {
  var $this = $(this);
  if (!$this.hasClass('active')) {
    $this.addClass('active');
  }
  e.preventDefault();
});

在JavaScript中：

var menu = document.querySelector('.menu');
var anchors = menu.getElementsByTagName('a');

for (var i = 0; i < anchors.length; i += 1) {
  anchors[i].addEventListener('click', function() { clickHandler(anchors[i]) }, false);
}

function clickHandler(anchor) {
  var hasClass = anchor.getAttribute('class');
  if (hasClass !== 'active') {
    anchor.setAttribute('class', 'active');
  }
}

我希望这可以帮到你。

- Nick Beranek

---

尝试在jquery 1.7.1下和bootstrap.js之前的闭合body标签中添加jquery，但没有成功。我不太了解jquery，想必是错过了从bootstrap css或js文件中调用某些内容。好吧，感谢您的快速回复。 - user1029779

你需要确保DOM已经准备好，这样才能够获取选择器。在jQuery中，添加 $(document).ready(function() { // 在此处添加代码 } ); - Nick Beranek

我修改了jQuery。结果发现.not()不会返回布尔值true或false。现在我正在检查它是否没有那个类。 - Nick Beranek

我想我会尝试使用滚动监听来使其工作，但即使如此也很麻烦。希望文档能更好些。 - user1029779

问题的一部分是我使用了Cufon字体，没有意识到它会导致颜色问题。感谢您的帮助。 - user1029779

Answer 3

这是我用来处理Twitter Bootstrap导航列表的代码：

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

- hbinduni

---

哇，当我尝试使用CodeIgniter时，这对我很有用。你太棒了 :) - Jay Mayu

e.preventDefault()将阻止链接打开。 - armnov

Answer 4

我使用两行代码，具体取决于我的导航菜单结构

只需确保您的链接起始时没有active类。

实际链接

如果您的导航链接位于单独的HTML文件中（例如express.js中带有菜单的布局模板），则可以执行以下操作：

$('ul.nav > li > a[href="' + document.location.pathname + '"]').parent().addClass('active');

哈希链接

如果它们是哈希值，执行以下操作：

$('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); });

如果您不想在哈希点击时滚动，请返回false：

 $('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); return false; });

- konsumer

---

+1 对于适用于两种导航样式的可靠解决方案！ - Chase Florell

如果href属性指向根href="/"，或者在url的路径中添加了更多参数，会发生什么？它将彻底失败！永远不要相信用户！！！ - alex

你没有信任用户。客户端的JavaScript正在解析您放置在HTML中的链接。如果您希望其正常工作，请不要在链接前面加上“/”，或修改我的代码片段以包括“/”。 - konsumer

这是一个例子，我通常会根据我使用的链接样式进行调整（我始终掌控着它们）。对于您需要参数的示例，请尝试使用以下选择器：$('ul.nav > li > a[href^="' + document.location.pathname + '"]')。 - konsumer

@konsumer：你太棒了！ :) - Sumeet Gavhale

Answer 5

看了其他人的答案，如果你希望网页在侧栏菜单被点击后滚动到该部分，则不要 preventDefault。

此外，你只需删除当前活动类并添加一个新的类，而不是搜索所有li。你还希望当你选择的列表项已经处于活动状态时，代码不做任何操作，不需要不必要地添加和删除相同的活动类。最后，你应该将事件监听器放在a元素上，而不是li上，因为它更容易在iPhone、平板电脑等设备上触发点击事件。还可以使用 .delegate，这样你就无需等待DOM准备就绪事件。所以最终我会这样做（我假设你已经预加载了jQuery）：

$('body').delegate('.menu li a', 'click', function(){
    var $thisLi = $(this).parents('li:first');
    var $ul = $thisLi.parents('ul:first');
    if (!$thisLi.hasClass('active')){
        $ul.find('li.active').removeClass('active');
        $thisLi.addClass('active');
    }
});

- Mauvis Ledford

Answer 6

我建议使用以下代码：

：

 <script>
      var curentFile = window.location.pathname.split("/").pop();
      if (curentFile == "") curentFile = "Default.aspx";
      $('ul.nav > li > a[href="' + curentFile + '"]').parent().addClass('active');
 </script>

它的工作效果非常好。

- Ali Mahmoodi

Answer 7

我为了解决这个问题做了一些不同的事情（顺便说一下，我是一个完全的html/css/js业余爱好者）。

我的每个导航栏按钮都指向一个新页面。因此，在每个页面的html中，我在底部放置了类似于以下内容的代码：

<script type="text/javascript">
    $(document).ready( function(){
       $("#aboutButton").removeClass("active");
    });

    $(document).ready( function(){
       $("#dashboardButton").addClass("active");
    });
</script>

这对我立刻起作用了。

顺便说一句，我尝试了被接受的答案，但没有成功，因为它也需要从当前活动的按钮中删除“active”类，才能真正地“切换”过去。我相信这是可能的，但再次说明，我对这些东西还很陌生。

- csturtz

Answer 8

测试过，正常工作。

    $('.navbar li').click(function(e) {
        $('.navbar li.active').removeClass('active');
        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }

    });

  <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            . . . 
  </ul>

- Marios Nikolaou

Answer 9

如果你在使用JSP时遇到问题，要注意包名。

document.location.pathname返回的是/packagename/index.jsp

但我导航栏中的href只是index.jsp

所以，修改konsumer的答案：

$(document).ready(function() {
   var string = document.location.pathname.replace('/Package Name/','');
   $('ul.nav > li > a[href="' + string + '"]').parent().addClass('active');
} );

- FredoAF

---

完全没问题。我的代码只是针对顶级链接，从正在运行的项目中提取的代码。可能最好使用以下代码：$('ul.nav > li > a[href="' + document.location + '"]').parent().addClass('active'); - konsumer

Answer 10

<ul class="main-menu">
    <li><a href="~/Cases/Index"><i class="fa fa-font fa-fw"></i><span class="text">Audit Case</span></a></li>
    <li><a href="~/Cases/Auditplan"><i class="fa fa-font fa-fw"></i><span class="text">Audit Plan</span></a></li>
    <li><a href="~/Cases/Auditreport"><i class="fa fa-font fa-fw"></i><span class="text">Audit Report</span></a></li>
    <li><a href="~/Cases/Company"><i class="fa fa-font fa-fw"></i><span class="text">Company Details</span></a></li>
</ul>

<script>
$(function(){
  $('.main-menu li > a[href="' + document.location.pathname + '"]').parent().addClass('active').siblings().removeClass('active');
})
</script>

- Luke Bhangyi