Javascript 在导航栏中将HTML列表项更改为活动

我正在使用

$（“#navbar partial”）将我的navbar加载到每个页面中。在页面底部的脚本标记中加载（“navbar.html）

导航栏列表代码如下所示：

<ul id="main-nav" class="nav nav-sidebar">
  <li>
    <a href="a.html"></a>
  </li>                     
  <li>
    <a href="b.html"></a>
  </li>
  <li>
    <a href="c.html"></a>
  </li>
  <li>
    <a href="d.html"></a>
  </li>
</ul>

在加载调用之后，它位于html页面底部的同一个脚本标记中

有什么想法吗

---

谢谢

，因为内容不存在于DOM就绪上（考虑到Ajax的异步性质），您需要使用

on（）

将

单击处理程序绑定到一个祖先元素，该元素在DOM就绪时存在于DOM中，即具有
id=“navbar partial”的元素“
，将新内容加载到其中：

// selecting the element present on DOM-ready:
// binding the 'click' event that's fired on elements
// matching the '.nav li' selector:
$('#navbar-partial').on('click', '.nav li', function (e) {
    $(this).addClass('active').siblings().removeClass('active');
});

您可以绑定到DOM树更上层的元素，但是绑定到最近的元素可以减少检测事件所需的冒泡量

参考资料：



您应该使用委托

$(document).on('click', ".nav li", function(e) {
        $(this).addClass('active').siblings().removeClass('active');
    });

仍然没有运气，我正在控制台中检查html，并且没有添加活动标记。不幸的是，没有更多的上下文，我无法提供任何有用的信息；顺便提一下，您知道您的初始选择器，
$（“导航栏部分”）
是错误的吗？它不是要查找
id
，而是要查找
元素（显然不存在）。我在问题中输入错误，对此表示抱歉。编辑它
$(document).on('click', ".nav li", function(e) {
        $(this).addClass('active').siblings().removeClass('active');
    });