带有jQuery的addClass/removeClass

我已经研究这个小问题几个小时了，真的需要一些帮助。我有三个引导导航药片：

HTML:

jQuery（很抱歉，这是非常未优化的）：

var home=$（'#section1'）.offset（）；
var resume=$（'#section2'）.offset（）；
var contact=$（'#section3'）。offset（）
//滚动时更改活动类
$（窗口）。滚动（函数（）{
var position=$（document.scrollTop（）；
如果（位置=home.top-80）{
$（'.home class'）.addClass（'active'）；
$（'.resume class'）.removeClass（'active'）；
$（'.contact class'）.removeClass（'active'）；
}
如果（位置>resume.top-50）{
$（'.home class'）.removeClass（'active'）；
$（'.resume class'）.addClass（'active'）；
$（'.contact class'）.removeClass（'active'）；
}
如果（位置>触点顶部-50）{
$（'.home class'）.removeClass（'active'）；
$（'.resume class'）.removeClass（'active'）；
$（'.contact class'）.addClass（'active'）；
}
});

---

TL；DR——滚动到网页的某些方面会突出显示导航药丸上的相应部分，但当我开始单击药丸然后滚动时，会突出显示多个导航药丸。我的问题是-当我单击+滚动时，

removeClass（'active'）

为什么不摆脱

.active

类？

您是被迫使用jQuery的吗？Bootstrap为此提供了一个完全自动化的功能，称为

scrollspy

。如果可以使用引导，请查看以下内容：

另外，这里有一个非常清楚的例子说明如何使用它。

---

您是被迫使用jQuery的吗？Bootstrap为此提供了一个完全自动化的功能，称为

scrollspy

。如果可以使用引导，请查看以下内容：

另外，这里有一个非常清楚的例子说明如何使用它。

---

您能提供JSFIDLE或Codepen吗？在此之前，我的第一个猜测是看看你的

.active

是如何设置的，它是如何被删除的，它是如何不被删除的。当您单击它时，可能会设置

.active

，但是当您使用scroll时，您并没有正确地取消设置现有的

.active

元素。如果它不处于活动状态，

.nav pills>li>a

是否会处理它？因此，当删除pill的活动类时，它应该返回到由

.nav pills>li>a

设置的行为？如果我错了，请纠正我。我不明白问题出在哪里只是开玩笑。出于某种原因，它在JSFIDLE上工作，但在我的本地文件上不工作……我建议您在代码中设置一个断点，然后在单击pill时单步执行。您可以提供JSFIDLE或Codepen吗？在此之前，我的第一个猜测是看看你的

.active

是如何设置的，它是如何被删除的，它是如何不被删除的。当您单击它时，可能会设置

.active

，但是当您使用scroll时，您并没有正确地取消设置现有的

.active

元素。如果它不处于活动状态，

.nav pills>li>a

是否会处理它？因此，当删除pill的活动类时，它应该返回到由

.nav pills>li>a

设置的行为？如果我错了，请纠正我。我不明白问题出在哪里只是开玩笑。出于某种原因，它在JSFIDLE上运行，但在我的本地文件上不起作用……我建议您在代码中设置一个断点，然后在单击药丸时单步执行。他已经在使用引导，所以我想可以放心地假设他可以使用它。很抱歉，当时没有注意到这一点。但是在这种情况下，为什么要使用一些jQuery呢？如果有一个Bootstrap函数可以提供您想要的东西，那么我一定会尝试一下。只是我主要使用这个项目来熟悉jQuery。我也很快就能弄明白这一点（上面的JSFIDLE可以精确地处理我的代码，但不能处理我的本地文件，这非常令人费解。）他已经在使用bootstrap了，所以我想可以放心地假设他可以使用它。很抱歉，当时没有注意到这一点。但是在这种情况下，为什么要使用一些jQuery呢？如果有一个Bootstrap函数可以提供您想要的东西，那么我一定会尝试一下。只是我主要使用这个项目来熟悉jQuery。我也非常接近于弄明白这一点（上面的JSFIDLE可以准确地处理我的代码，但不能处理我的本地文件，这非常令人费解）

<nav class="navbar navbar-fixed-top">
    <div class="container">
        <ul class="nav nav-pills pull-right">
            <li class="home-class"><a href="#home-page" id="home">Home</a></li>     
            <li class="resume-class"><a href="#resume-page" id="resume">Resume</a></li>         
            <li class="contact-class"><a href="#contact-page" id="contact">Contact</a></li>
        </ul>
    </div>
</nav>

.nav-pills > li > a {
    background-color: transparent;
    color: #a9a9a9;
}

.nav-pills > li.active > a {
    background-color: #536872;
    color: #FFFFFF;
}

var home = $('#section1').offset();
var resume = $('#section2').offset();
var contact = $('#section3').offset()

//Change active class when scrolling
$(window).scroll(function() {
    var position = $(document).scrollTop();

    if (position <= home.top - 80) {
        $('.home-class').removeClass('active');
        $('.resume-class').removeClass('active');
        $('.contact-class').removeClass('active');
    }

    if (position >= home.top - 80) {
        $('.home-class').addClass('active');
        $('.resume-class').removeClass('active');
        $('.contact-class').removeClass('active');
    }

    if (position > resume.top - 50) {
        $('.home-class').removeClass('active');
        $('.resume-class').addClass('active');
        $('.contact-class').removeClass('active');
    }

    if (position > contact.top - 50) {
        $('.home-class').removeClass('active');
        $('.resume-class').removeClass('active');
        $('.contact-class').addClass('active');
    }
});