javascript - 将 HTML 列表项更改为在导航栏中处于事件状态

Question

我正在将我的导航栏加载到每个页面中，在脚本标记的页面底部使用 $("#navbar-partial").load("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>

我试过这个和这个的一些变体，但无法让它工作:

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

这是在 html 页面底部的同一个脚本标记中，在加载调用之后。

有什么想法吗？

谢谢

Answer 1

你应该使用委托(delegate)

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