Question

我有一个网页的网站，其中某个锚定链接如li's中的ul，还有两个菜单包含相同的锚定链接。

菜单如下：

<div id="nav">
    <ul>
        <li><a href="#home" class="current_page_item" onclick="closeNav();">Home<li>
        <li><a href="#about" onclick="closeNav();">About<li>
        <li><a href="#faq" onclick="closeNav();">FAQ<li>
        <li><a href="#contact" onclick="closeNav();">Contact<li>
    </ul>
</div>

我找到了一些代码，使我可以从这两个菜单中突出显示当前的锚链接（正在运行）：

const navsStr = '#nav li, #foot li';

$(navsStr).on('click', function (e) {
    e.preventDefault();
    const href = $(this).find('a').attr('href');
    let items = $(navsStr).find("a[href$='" + href + "']");

    $(items).parent().addClass('current_page_item').siblings().removeClass('current_page_item');  
});

我还想做的是在用户向下滚动页面时突出显示这些锚链接，我在脚注js中添加了以下代码，但似乎不起作用。我的猜测是新代码与我已经用来突出显示导航项的现有代码冲突，但是即使我取出该代码，滚动突出显示代码也无法正常工作。该代码正在另一个站点上运行，但是我没有尝试使用多个菜单，所以我认为我做错了事。

$(document).ready(function(){
    var $sections = $('#nav, #overlay');

    $(window).scroll(function(){
        var currentScroll = $(this).scrollTop();
        var $currentSection

        $sections.each(function(){
            var divPosition = $(this).offset().top;

            if( divPosition - 1 < currentScroll ){
                $currentSection = $(this);
            }

            var id = $currentSection.attr('id');
            $('a').removeClass('current_page_item');
            $("[href=#"+id+"]").addClass('current_page_item');
        })
    });
});

Answer 1

不确定这是否正是您要查找的内容，但是要突出显示，您可以通过添加新类并使用JQuery删除旧类或切换这些类来滚动更改CSS类。因此，请在所有标签上设置一个诸如“绿色”的类，然后：

jQuery添加/删除：

$(window).scroll(function(){
      $('.green').addClass('red');
      $('.green').removeClass('green');      
    });

或切换：

$(window).scroll(function(){
      $('.green').toggleClass('red');
     $('.green').toggleClass('green');
   });

如果只需要在某个滚动点上进行更改，则可以尝试以下线程，该线程说明如何使用像素值或锚点进行更改： Change CSS element with JQuery when scroll reaches an anchor point

滚动时突出显示多个菜单锚点链接

1 个答案: