Jquery 需要根据站点部分更改CSS div的位置

如果其他地方已经回答了这个问题，我很抱歉，但我真的很难找到任何相关的问题

网站：

我试图找到一种方法，使菜单（.lava nav）下的线条始终跟随活动部分（与部分文本变为黑色的方式相同）。我已经有它在悬停工作，但我只是不能找出最好的解决方案，让它为当前活动部分的工作

下面是我使用的添加和删除类将字体文本更改为黑色的代码；我应该在这里做类似的事情吗

function afterLoadCallback(anchorLink) {
    $("a", "#topnav").removeClass("activenav");
    $("a[href=#"+anchorLink+"]", "#topnav").addClass("activenav");
};

---

非常感谢

您好，以下是您需要的工作示例：

HTML:

这里，在mouseover事件上加载数据属性并相应地移动滑块。 （所以我完全删除了以前做这件事的css）。还有一个mouseleave事件，它基于activenav类加载滑块位置（来自data-attr）。为了使滑块“粘住”到激活位置

---

CSS相同，我刚刚删除了这些：

#topnav li:nth child（1）：hover~。lava nav

这非常有效！不过，还有一件事，当使用鼠标滚轮在各部分之间移动时，是否有办法改变属性，如黑色文本所示？fullPage有后加载回调，所以只需将单击回调提取到公共函数中，并在其中调用该函数即可。

<header>
    <nav class="main-nav nav" id="header">
        <ul class="topnav" id="topnav">
            <li><a href="#music" data-left="11.4%" data-width="50px" class="btn">MUSIC</a></li>
            <li><a href="#gallery" data-left="20.7%" data-width="74px" class="btn">GALLERY</a></li>
            <li><a href="#video" data-left="32.5%" data-width="50px" class="btn">VIDEO</a></li>
            <li><a href="#home" class="btn btn-hide activenav" data-left="42.2%" data-width="125px">MASK OF JUDAS</a></li>
            <li><a href="#gigs" data-left="60.7%" data-width="41px" class="btn">GIGS</a></li>
            <li><a href="#merch" data-left="67.5%" data-width="59px" class="btn">MERCH</a></li>
            <li><a href="#contact" data-left="77.5%" data-width="71px" class="btn">CONTACT</a></li>
            <div class="lava-nav"</div>
        </ul>
        <div><a href="index.html#home" class="nav-text">MASK OF JUDAS</a></div>
        <div class="burger">
            <button class="hamburger hamburger--3dx" type="button">
                <a href="javascript:void(0);" onclick="myFunction()">
                    <span class="hamburger-box">
                        <span class="hamburger-inner"></span>
                    </span>
                </a>
            </button>
        </div>
    </nav>
</header>

function setSlider(element){
  var data = {
    left: element.attr("data-left"),
    width: element.attr("data-width")
  };
  $(".lava-nav").css("left", data.left).css("width", data.width);
}

$("#topnav").on("mouseover","li", function(){
  var dataElement = $(this).find("a");
  setSlider(dataElement);
})

$("#topnav").on("mouseleave", function(){
  console.log("leave")
  var active = $(".activenav").first();
  setSlider(active);
})

$("#topnav").on("click", "a", function(){
  $(".activenav").first().removeClass("activenav");
  $(this).addClass("activenav")
})