jQuery航路点和菜单项

在我的网站上使用航路点（或者触发航路点，我不知道）时，我在突出显示右菜单项时遇到问题。我的内容的第二部分（工作）很好，但第一部分和第三部分（关于和联系）不行。我的jquery技能不好，所以我需要一些帮助

HTML:

<nav>
    <ul class="nav nav-pills">
        <li class="active"><a href="#about">ABOUT</a></li>
        <li><a href="#work">WORK</a></li>
        <li><a href="#contact">CONTACT</a></li>
    </ul>
</nav>
<section id="about">..</section>
<section id="work">...</section>
<section id="contact">...</section>

---

提前谢谢

尝试在以下位置建立一个工作示例：

$('#about').waypoint(function() {
    $('.nav .active').removeClass("active");
    $('.nav li:nth-child(1)').addClass("active");
})
$('#work').waypoint(function() {
    $('.nav .active').removeClass("active");
    $('.nav li:nth-child(2)').addClass("active");
})
$('#contact').waypoint(function() {
    $('.nav .active').removeClass("active");
    $('.nav li:nth-child(3)').addClass("active");
})