从特定的 a href 中删除活动类答案

【问题标题】：Removing active class from specific a href从特定的 a href 中删除活动类
【发布时间】：2016-11-29 13:12:59
【问题描述】：

我有一个带有导航栏的单页布局，可以更改滚动位置上的活动类。我有一个问题，当我滚动到联系人部分时它不会选择“联系我们”导航栏链接，但我已经通过添加代码以在用户滚动到页面底部时使“联系我们”链接处于活动状态来解决这个问题.

现在的问题是，“获取报价”链接在我到达页面底部后不会激活，直到我向上滚动并再次向下滚动。

即。一切都很好地滚动过每个 div，并且链接根据滚动激活。进入页面底部“联系我们”激活。 向上滚动到 'quote' div，但“Get A Quote”没有激活。滚动过去，其他所有工作，向下滚动，“获取报价”再次激活。

这是我的完整代码

Javascript

<script type='text/javascript'>//<![CDATA[
window.onload = function(){

    // Cache selectors
    var lastId,
    topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
        var item = $($(this).attr("href"));
        if (item.length) { return item; }
    });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
    var href = $(this).attr("href"),
    offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
    $('html, body').stop().animate({ 
        scrollTop: offsetTop
    }, 300);
    e.preventDefault();
});

// Bind to scroll
$(window).scroll(function(){

    // Get container scroll position
    var fromTop = $(this).scrollTop()+topMenuHeight;

    // Get id of current scroll item
    var cur = scrollItems.map(function(){
        if ($(this).offset().top < fromTop)
            return this;
    });

    // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";

   if (lastId !== id) {
      lastId = id;
      // Set/remove active class
      menuItems
        .parent().removeClass("active")
        .end().filter("[href='#"+id+"']").parent().addClass("active");
   }
});

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        $(".contactive").addClass('active');
        $('a[href="#quote"]').parent('li').parent('li').removeClass('active');
    }
    else    {
        $(".contactive").removeClass('active');
    }
});
}//]]>
</script>

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
        <div id="header">

        <div id="navbar">
            <div id="logo">
                <img src="logosmall.png">
            </div>
                <ul id="top-menu">
                    <li class="active">
                            <a href="#home">Home</a>
                    </li>
                    <li>
                            <a href="#services">Services</a>
                    </li>
                    <li>
                            <a href="#moving">Moving Tips</a>
                    </li>
                    <li>
                            <a href="#quote">Get A Quote</a>
                    </li>
                    <li class="contactive">
                            <a href="#contact">Contact Us</a>
                    </li>
                </ul>
        </div>
        </div>

        <div id="home">
            Content Here.
        </div>

        <div id="services">
        <div id="servicesleft"></div>
        <div id="servicesmain">
            <div id="movessec">
                Content Here.   
            </div>

            <div id="movessec">
                Content Here.   
            </div>

            <div id="movessec">
                Content Here.   
            </div>
        </div>
        <div id="servicesright"></div>
        </div>  


        <div id="moving">Content here.</div>    

        <div id="quote">Quote form goes here.</div>

        <div id="contact">
            <div id="contactleft">Content Here</div>
                <div id="contactmain">Content Here</div>
            <div id="contactright">Content Here</div>
        </div>


    </body>

【问题讨论】：

$("[href='#"+ quote +"']") 需要一个名为 quote 的变量，但该变量不存在。请尝试使用文字字符串：$("[href='#quote']")。您已经在简短示例中更正了它，但在完整代码参考中没有。
刚刚更新了帖子，找到了原来问题的解决办法，现在又遇到了新问题
为什么你有 2 个独立的函数来处理滚动事件？可以想象，这可能会导致某种竞争条件。
我已经清理了我的代码并将其全部放在一个滚动事件下，但我仍然遇到同样的问题......有什么解决方案吗？

标签： jquery html

【解决方案1】：

当您点击页面底部时，您通过删除其“活动”类来为“引用”部分创建一个特殊情况（以使联系我们表单处于活动状态，即使滚动高度尚未达到它，并且不能，因为它是页面的结尾）。

但是，如果高度不在底部，则不会再次激活该部分。即您忘记了与原始特殊情况相反的操作。

不过，实际上，您可以稍微简化代码并使其不再是特殊情况（不依赖于“引号”作为倒数第二项）：

// Bind to scroll
$(window).scroll(function(){

    // Get container scroll position
    var fromTop = $(this).scrollTop()+topMenuHeight;

    // Get id of current scroll item
    var cur = scrollItems.map(function(){
        if ($(this).offset().top < fromTop)
            return this;
    });

    // Get the id of the current element
    cur = cur[cur.length-1];
    var id = cur && cur.length ? cur[0].id : "";

    if (lastId !== id) {
        menuItems.parent().removeClass('active');
        lastId = id;
    }

    //special case for "contact us" section at bottom of page
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        menuItems.parent().removeClass("active");
        $(".contactive").addClass('active');
    }
    else {
        $(".contactive").removeClass('active');
        $("[href='#"+id+"']").parent().addClass('active');
    }
});

【讨论】：

就在你的 else 中的最后一行，你拯救了我的一天！