javascript - 我无法将事件类(class)添加到列表中

Question

$(window).load(function () {
  // body...
  $(".nav li").click(function () {
    alert('captain');
    $(".nav li").removeClass('active');
    $(this).addClass('active');
  })
})

section{
  padding-top: 80px;
  min-height: 100vh;
}
a:focus{
  outline: none;
}
.navbar-nav li {
  border-bottom: 3px solid transparent;
}
.navbar-nav li:hover, .navbar-nav li.active  {
  border-bottom: 3px solid orange;
  color: orange;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover{
  background: transparent !important;
  color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <div class="lnr lnr-menu"></div>
      </button>
      <a class="navbar-brand logo" href="#">sample</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#Button1">Button 1</a></li>
        <li><a href="#Button2">Button 2</a></li>
        <li><a href="#Button3">Button 3</a></li>
        <li><a href="#Button4">Button 4</a></li>
        <li><a href="#Button5">Button 5</a></li>
        <li><a href="#Button6">Button 6</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>
<div class="container-fluid">
  <div class="content">
    <section id="button1"></section>
    <section id="button2"></section>
    <section id="button3"></section>
    <section id="button4"></section>
    <section id="button5"></section>
    <section id="button"></section>
  </div>
</div>

当我向部分添加 id 时，“事件”不起作用，但是当我删除 id 到部分时，它工作正常。谁能告诉我我犯了什么错误？`我改变了js中的类，但dint find和dint理解了这个错误，如何修复这个错误？

Answer 1

解决了你的问题。在您的链接上 - http://xylines.com/demo/ - 您的 anchor (< a >) 及其父 anchor (< li >) 都有一个点击事件。当您单击它时，只会触发 anchor 单击事件。因此，您可以滚动，但不会更改事件类。

您可以在 anchor 点击中处理这两个问题，如下所示:

$(document).ready(function() {
    // Scroll animation
    $('a').click(function(e) {
        e.preventDefault();

        //These two lines handle your active class change
        $('.nav li').removeClass('active');
        $(this).parent('li').addClass('active');

        $('html, body').animate({
            scrollTop: $($.attr(this, 'href')).offset().top
        }, 800);
    });
});

然后您可以完全删除它，因为它现在已在上面处理:

$(window).load(function () {
  // body...
  $(".nav li").click(function () {
    alert('captain');
    $(".nav li").removeClass('active');
    $(this).addClass('active');
  })
})

Updated JSFiddle