Jquery 引导CSS主动导航

在Bootstrap网站上，subnav与分区匹配，并在您或滚动到分区时更改背景颜色。我想创建我自己的菜单，没有所有的背景颜色和一切，然而，我改变了我的CSS类似，但当我向下滚动或点击菜单项时，活动类不会切换。不知道我做错了什么

HTML:

---

我检查了文件；jQuery、bootstrap.js和bootstrap.css都链接正确。我是否必须添加一些额外的jQuery，或者我是否缺少一些CSS，才能像他们网站上的subnav菜单一样激活切换？

为了切换类，需要执行一些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');
  }
}

$(".menu li").click(function(e) {
    $(".menu li").removeClass("active");
    $(this).addClass("active");
    e.preventDefault();
});

var menu=document.querySelector（'.menu'）；
var archors=menu.getElementsByTagName（'a'）；
对于（变量i=0；i<0.length；i+=1）{
锚点[i]。addEventListener（'click'，function（）{clickHandler（锚点[i]）}，false）；
}
函数clickHandler（锚定）{
var hasClass=anchor.getAttribute（'class'）；
如果（hasClass！=“活动”）{
setAttribute（'class'，'active'）；
}
}

---

我希望这能有所帮助。

我做了一些不同的事情来解决这个问题（仅供参考，我是一个完全的html/css/js业余爱好者）

我的每个导航栏按钮都会转到一个新页面。因此，在每个页面的html中，我在底部放置了如下内容：

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

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

$（文档）.ready（函数（）{
$（“#aboutButton”）.removeClass（“活动”）；
});
$（文档）.ready（函数（）{
$（“#仪表板按钮”）.addClass（“活动”）；
});

这让它立刻为我工作

---

另外，我尝试了接受的答案，但没有运气，因为它还需要从当前活动按钮中删除“活动”类，才能真正“切换”。我相信这是可能的，但我对这件事还是很陌生。

这就是我的结局，因为你也必须清除其他人

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

---

这是我处理twitter引导导航列表的代码：

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

---

添加到您的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');
  }
}

$(".menu li").click(function(e) {
    $(".menu li").removeClass("active");
    $(this).addClass("active");
    e.preventDefault();
});

---

查看其他一些答案，如果您希望在单击侧菜单时网页向下滚动到该部分，则不希望

preventDefault

此外，您只需删除当前活动类并添加一个新类，而不必搜索所有li。当您选择的列表项已经处于活动状态时，您还希望代码不会执行任何操作，而不是不必要地添加和删除同一个活动类。最后，您应该将事件侦听器放在a元素而不是li元素上，因为它更容易触发iPhone和平板电脑等设备上的单击事件。还可以使用

.delegate

，这样您就不必等待DOM就绪事件。所以最后我会这样做（我假设您已经预加载了jQuery）：

我使用2个1行程序，这取决于我的导航结构 只需确保您的链接中没有活动类可以启动

实际链接 如果导航链接位于单独的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; });

---

任何使用jsp对此有问题的人，请注意您的包

document.location.pathname给了我：/packagename/index.jsp

但是我的导航栏中的href名为just index.jsp

因此，编辑konsumer的答案：

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

---

这是一个非常古老的答案，但我选择了最上面的答案，并且做得更好。只有当页面上有一个答案时，上面的答案才有效。这将其范围限定为从

同级元素中删除活动元素，并将其添加到您单击的元素中

我还添加了类
nav toggle
，这样它就不会干扰已经连接了引导js的东西

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

我尝试了上面的一些答案，它适用于“.active”类，但链接不起作用，它仍然保留在当前页面上。然后我试了一下：

var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');

我在这里找到它：
我建议使用以下代码：

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


var curentFile=window.location.pathname.split（“/”）.pop（）；
如果（curentFile==“”）curentFile=“Default.aspx”；
$（'ul.nav>li>a[href=“”+curentFile+“]”]）.parent（）.addClass（'active'）；

它的工作就像一个符咒。
经过测试，效果很好

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

$（'.navbar li'）。单击（函数（e）{
$（'.navbar li.active'）.removeClass（'active'）；
var$this=$（this）；
if（！$this.hasClass（'active'））{
$this.addClass（'active'）；
}
});


. . . 







$（函数（）{
$（'.main menu li>a[href=“'+document.location.pathname+'”）.parent（）.addClass（'active'）.sides（）.removeClass（'active'）；
})
尝试在结束正文标记之前的jquery 1.7.1和bootstrap.js下添加jquery，但无效。我不太了解jquery，我想我只是错过了从引导css或js文件调用一些东西。哦，好的，谢谢你的快速回复。你需要确保DOM已经准备好，以便你能够抓取选择器。在jQuery中，添加
$（document）.ready（函数（）{//addcode here}）我修改了jQuery。结果是
.not（）
不会返回布尔值
true
或
false
。现在我正在检查它是否没有这个类。我想我会尝试使用scrollspy让它工作，但即使这样也很麻烦。希望文档更好。部分问题是我使用的是cufon字体，没有意识到它会导致颜色问题。谢谢你的帮助。哇，当我尝试使用代码点火器时，这对我来说是有效的。u r some some:）e.preventDefault（）将阻止指向open.totes的链接。我的只是顶层链接，从运行项目中提取代码。最好是执行$（'ul.nav>li>a[href=“”+doc
    $('.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>

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