hashtag scrollto链接上的当前状态

我想在链表的背景上完成颜色更改。列表中的链接位于粘滞菜单边栏中，并将滚动到同一页面上的某个部分。点击一个链接时，应该根据页面上的位置更改颜色。hashtag scrollto链接上的当前状态

谁能帮助我？

当前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;}

来源

2016-09-22 Ronald Wildschut

在CSS中只需添加

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

还应考虑引导scroll-spy

来源

2016-09-22 20:45:57 harryparkdotio

我已经完成了悬停状态......你可以在提供的链接上看到。事情是，我希望背景保持活跃，例如，当您点击2014年，然后滚动到该部分，然后背景保持活动状态，让您知道您在页面上的位置。它应该强调它可以这么说。 –

看看bootstrap，它比自定义编码更容易 – harryparkdotio

它不是一个真正的活动状态。它应该是一个当前状态。就像上面的主菜单一样。当在页面上的某个点上时，粘滞条中的适当链接应该高亮显示在页面上的位置，并使背景颜色保持在那里（与悬停状态相同的颜色） –

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

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

来源

2016-09-22 20:46:45 MikeEllis

hashtag scrollto链接上的当前状态

回答

相关问题