Question

我想在列表中的链接的背景上完成颜色更改。列表中的链接位于粘性菜单侧边栏中，并将滚动到同一页面上的某个部分。单击一个链接时，它应根据页面上的位置更改颜色。

谁可以帮我这个？

当前的HTML如下：

<div class="widget widget_nav_menu">
    <div class="menu-wij-zijn-umbrella-container">
        <ul id="menu-wij-zijn-umbrella" class="menu">
            <li id="menu-item-970" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-970"><a href="#team">TEAM</a></li>
            <li id="menu-item-971" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-971"><a href="#2016">2016</a></li>
            <li id="menu-item-972" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-972"><a href="#2015">2015</a></li>
            <li id="menu-item-973" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-973"><a href="#2014">2014</a></li>
            <li id="menu-item-974" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-974"><a href="#2013">2013</a></li>
        </ul>
    </div>
</div>

你可以看到它：https://wijzijnumbrella.nl/over-umbrella/

不知怎的，我想我需要一个脚本，将类当前添加到相应的链接，以便我可以使用以下css样式

#menu-wij-zijn-umbrella li a.current{background:#d2c153; color:white;}

Answer 1

在css中添加

:active到a标记，然后添加背景颜色。您还可以添加:hover。

另请参阅bootstrap scroll-spy

Answer 2

在您提供的演示实例中，值是在CSS中硬编码的。最简单的方法是使用CSS或SCSS中的变量为每个部分定义颜色，然后使用相同的变量来定义菜单项的颜色。

或者，您可以使用javascript在要查找的部分中查找元素并获取文本的颜色，然后使用该值设置菜单项的颜色。 for循环可以很容易地做到这一点。

hashtag链接上的当前状态

2 个答案: