Javascript 当访问者处于页面上的特定类别时，使文本具有不同的颜色

我有一个侧栏菜单（纯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的边栏。

---

侧边栏有一个固定的位置。

您需要的是scrollspy

链接：

---

为活动或非活动添加样式

.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）

Bootstrap内置了此功能，因此您可以使用他们的面包屑

或者我用jquery制作了一个很好的小提琴：

以下是相关的脚本：

按如下方式设置页面：

关于我们

以及运行它所需的JS：

$（.main”）。在（“滚动”上，函数（e）{
var百分之五十=美元（“.main”）.height（）*0.5；
var scroll_position=$（this.scrollTop（）；
var prev_scroll_position=$（this）.data（'scroll_position'）；
var delta=滚动位置-上一个滚动位置；
$（此）.data（'scroll\u position'，scroll\u position）；
//规则是：如果章节标签顶部跨越50%，则其变为活动，或者如果章节标签底部跨越50%，则其变为活动。
$（'section'）。每个（函数（i，el）{
$this=$（this）；
var top_y=$this.position（）.top；
var bottom_y=top_y+$this.height（）；
如果（（顶部<百分之五十<顶部+增量>百分之五十）||
（底部>百分之五十和底部+增量<百分之五十）
){
$（“a”）.removeClass（“活动”）；
$（“a#”+$this[0].id）.addClass（'active'）；
返回false；
}
});
});

您需要使用javascript来实现这一点-像scrollspy（）这样的插件应该可以工作。看起来所有链接都有固定位置？所以当向下滚动时，用户仍然可以看到链接（当然可以单击它们）？下面提供的解决方案有效。将它们实现到一个活动站点不会与复制/粘贴操作一起工作。您需要对解决方案和/或您的网站进行更改，以使其适合您。如果您提供了一个小提琴或其他与HTML/CSS输出您的网站，也许我们可以帮助您适应以下解决方案。这似乎可以很容易地解决这个问题。该网站是一个基于Wordpress的网站，看起来这个解决方案特别适用于Twitter引导？我尝试了这个解决方案，但它似乎不起作用，因为侧边栏和我页面的内容没有被视为同一页面。（使用Wordpress）。你是说它们在不同的框架中吗？您正在使用wordpress（后端cms/框架）与这样的前端问题无关。

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

<h3><a href="#chapter1" class="link active" id="chapter1">Chapter 1</a></h3>
<h3><a href="#chapter2" class="link" id="chapter2">Chapter 2</a></h3>
<h3><a href="#chapter3"  class="link" id="chapter3">Chapter 3</a></h3>
</div>
<div class='main'>
    <section id="chapter1">
        <a id="chapter1"></a>
    </section>
    <section id="chapter2">
        <a id="chapter2"></a>
    </section>
    <section id="chapter3">
        <a id="chapter3"></a>
    </section>
</div>

$(".main").on("scroll",function(e){
    var fifty_percent_y = $(".main").height() * 0.5;
    var scroll_position = $(this).scrollTop();
    var prev_scroll_position = $(this).data('scroll_position');
    var delta = scroll_position - prev_scroll_position;
    $(this).data('scroll_position', scroll_position);


    //the rule is: if the top of chapter section tag crosses up across 50% then it becomes active, or if the bottom of a section tag crosses down across 50% then it becomes active.
    $('section').each(function(i, el){
        $this = $(this);
        var top_y = $this.position().top;
        var bottom_y = top_y + $this.height();
        if ((top_y     < fifty_percent_y && top_y    + delta > fifty_percent_y) ||
            (bottom_y  > fifty_percent_y && bottom_y + delta < fifty_percent_y)
           ){
            $("a").removeClass('active');
            $("a#" + $this[0].id).addClass('active');
            return false;
        }
    });
});