当用户查看页面的特定部分时如何更改导航栏图标的颜色

如何解决当用户查看页面的特定部分时如何更改导航栏图标的颜色

我在 android 上有一个看起来像这样的导航栏

如果点击了以下链接

<a href="#body-heading" class="nav__link  nav__link--active">
<a href="#services" class="nav__link">
<a href="#images" class="nav__link">
<a href="#" class="nav__link">

所以我想要的是，如果有人在 android 上查看 ID 为 #services 的元素，我需要 js 或 css 来从主页图标切换类 nav__link--active 并将其添加到服务图标。我想对导航图标中的每个图标都这样做。有没有办法在 js 或 css 上做到这一点？

解决方法

这是适合您的工作解决方案

<pre>
     https://codepen.io/lasjorg/pen/ZEQpKqy
</pre>
   

,

您可以使用 Jquery 并在下面运行此代码

$('.nav__link').click(function(){
  $(this).addClass('nav__link--active').siblings('a').removeClass('nav__link-active')
})