Question

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>

Cannot set property 'test' of undefined

当添加和id为section时，“active”不起作用，但是当我删除id到section时它工作正常。任何人都可以让我知道我做了什么错误？“我在js中更改了类但是dint find并且dint了解了bug，如何修复bug？

Answer 1

找出问题所在。在您的链接 - http://xylines.com/demo/ - 您的主播（＆lt; a＆gt;）及其父级（＆lt; li＆gt;）都有点击事件。单击它时，仅触发锚点击事件。所以你得到你的滚动，但不是活动的类更改。

您可以在锚点击中处理这两个，如下所示：

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

Answer 2

＆＃13;

PATH

＆＃13;

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

＆＃13;

section {
  padding-top: 180px;
  min-height: 150vh;
}
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;
}

＆＃13;

我无法将活动类添加到列表中

2 个答案: