Question

我正在使用此Wordpress website，您可以看到一个滚动着陆页。作为id和此类id的每个部分都会像这样连接到导航点

示例：

http://ergon.nowcommu.myhostpoint.ch/home/#idee

当您在部分上滚动鼠标并单击相对链接上的导航时，我需要突出显示活动导航点。

我该怎么办？

Answer 1

您的网站已经构建了一些功能，一旦内容/对应项位于最终用户的视口中，就会更改菜单项的类别。

如果您检查该元素，您会发现菜单中的a标记在其内容对应的视图中会收到一个类.mPS2id-highlight。

因此，您只需添加CSS规则即可实现目标。

我已经在您的网站上对firebug中的规则进行了测试，似乎工作正常（!important是必要的）：

.mPS2id-highlight {
  color: #b51339 !important;
}

如果您想保留边框功能，可以改用以下规则：

.cssmenu > ul.menu > li:hover {
  border-bottom: 0 solid;
}
.mPS2id-highlight {
  border-color: #b51339 !important;
  color: #b51339 !important;
}

Answer 2

您需要使用javascript声明突出显示，特别是您使用自定义代码中的jquery执行以下操作：

$(document).on("scroll", onScroll);

$('a[href^="#"]').on('click', function (e) {
    e.preventDefault();
    $(document).off("scroll");

    $('a').each(function () {
        $(this).removeClass('active');
    })
    $(this).addClass('active');

    var target = this.hash,
        menu = target;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top+2
    }, 500, 'swing', function () {
        window.location.hash = target;
        $(document).on("scroll", onScroll);
    });
});

您也可以查看浏览器的控制台，因为它在您的页面中有错误

Wordpress：在滚动和单击时突出显示活动菜单颜色

2 个答案: