需要更改基于网站部分的CSS div定位部分

如果这已在其他地方得到解答，我很抱歉，但我很难找到任何相关的东西。需要更改基于网站部分的CSS div定位部分

网站：http://www.jamesaslett.club/

我试图找到一种方法，使菜单（.lava-NAV）的下一行始终遵循积极部分（以同样的方式，该部分文本变为黑色）。我已经在悬停工作，但我无法找出最佳的解决方案，让它为当前活动部分工作。

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

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

非常感谢

来源

2017-03-03 sad muso

嗨，你所需要的是在这里工作示例： http://codepen.io/xszaboj/pen/gmMjGg?editors=0010

HTML：

<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>

在这里你可以看到，我已经添加数据 - 属性然后在JavaScript代码中使用。

的Javascript：

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") 
})

在这里，鼠标悬停事件加载数据 - 属性，并相应地移动滑块。（所以我删除了完全这样做的CSS）。然后在mouseleave事件上也会加载基于activenav类的滑块位置（从data-attr开始）。为了使滑块“粘”到活动位置。

CSS同我刚刚删除了这些：#topnav li:nth-child(1):hover ~ .lava-nav

来源

2017-03-05 10:34:45 xszaboj

神奇的解决方案@xszaboj，太感谢你了！ –

这个效果非常好！还有一件事，是否有一种方法可以使用鼠标滚轮按照黑色文本移动部分时改变属性？ –

fullPage具有afterLoad回调功能，因此只需将点击回调提取到常用功能并在其中调用该功能。 – xszaboj

需要更改基于网站部分的CSS div定位部分

回答

相关问题