Question

我很抱歉，如果已经在其他地方得到了解答，但我很难找到任何相关内容。

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

我试图找到一种方法使菜单下面的行（.lava-nav）始终跟随活动部分（与部分文本变为黑色的方式相同）。我已经将它用于悬停，但我无法找到使其适用于当前活动部分的最佳解决方案。

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

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

非常感谢

Answer 1

您好，这是您需要的工作示例： 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")
})

此处，在mouseover事件中加载数据属性并相应地移动滑块。（所以我删除了完全执行此操作的css）。然后还有一个mouseleave事件，它根据activenav类加载滑块位置（来自data-attr）。为了使滑块“粘住”到活动位置。

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

需要根据站点部分更改CSS div定位

1 个答案: