javascript - 当访问者在页面上的特定类别时使文本颜色不同

Question

我有一个侧边栏菜单(纯 html)用于在页面上导航。例如:

<div class="sidebar"><h2>About us</h2>

<h3><a href="#chapter1" class="link">Chapter 1</a></h3>
<h3><a href="#chapter2" class="link">Chapter 2</a></h3>
<h3><a href="#chapter3"  class="link">Chapter 3</a></h3>
</div>

当访问者单击第 1 章时，他会转到第 1 章部分，侧边栏中的第 1 章链接会在几秒钟内显示不同的颜色(因为:事件延迟)。

但是，这不是我的情况的解决方案。当访问者位于第 1 章部分时，我希望将侧边栏中的链接设置为不同的颜色。当访问者向下滚动到第 2 章时，第 1 章链接将恢复正常，侧边栏中的第 2 章链接将变为不同颜色。

欢迎提出解决方案/建议!

更新:我正在为这个网站使用 Wordpress。有一些很好的建议，但看起来它们对我不起作用。我使用的是基于 Wordpress 的网站，侧边栏是 Wordpress 侧边栏。侧边栏有一个固定的位置。

Answer 1

为事件或非事件添加样式

.active { color=red; }
.inactive { color=black; }

对于你的章节，添加 onMouseOver="setActive(1)", onMouseOver="setActive(2)", 等等...

然后添加一个js函数来设置侧边栏的颜色。

function setActive(ch)
{
   document.getElementById("#chapter1").className="link "+(ch==1:"active";"inactive");
   document.getElementById("#chapter2").className="link "+(ch==2:"active";"inactive");
   document.getElementById("#chapter3").className="link "+(ch==3:"active";"inactive");
}

当您点击任何侧边栏元素时，您可能还想调用 setActive(xx)。