用于根据用户所在区域更改背景图像的 Javascript

Question

我的导航有 5 个按钮 [Home、About、Services、Events、Contact]，每个按钮都有一个背景图片“blue-button.png”。当用户在该部分时，我想将其切换为“white-button.png”。我希望它像 a:active 一样简单，但事实并非如此，我将解释原因；

所有内容都显示在叠加层中。网站的构建方式，您永远不会离开索引页面，但内容会加载到索引页面中。这就是 a:active 不起作用的原因。

现在例如，当用户打开“关于”页面时，内容(我称之为“关于主要”)出现，并且有指向“关于我”、“关于你”和“常见问题解答”的链接”。我希望“关于”按钮在用户处于与“关于”有关的任何区域(关于主要、关于我、关于你、常见问题解答)时更改背景图像(变为白色)...我也想要按钮当用户转到不同的部分(例如:联系人)时变回蓝色，然后让联系人按钮变为白色。

我注意到告诉用户在哪里的唯一方法是他们所在的叠加层具有 display:block 的 css 样式而所有其他的都隐藏了 display:hidden ...

所以，我在想类似于这样的 javascript:

if (关于主要、关于我、关于你、常见问题解答)是 display:block
{ $(".about").css('background-image', 'url(../img/white-button.png)' }
else
{ $(".about").css('background-image', 'url(../img/blue-button.png)' }

if (联系人)是display:block
{ $(".contact").css('background-image', 'url(../img/white-button.png)' }
else
{ $(".contact").css('background-image', 'url(../img/blue-button.png)' }

导航按钮的类如下:
<a class="about">
<a class="contact">

而叠加层的 ID 如下:
<div class="simple_overlay" id="about">
<div class="simple_overlay" id="contact">

我知道这是很多信息，但希望有人能帮我弄清楚细节，我对 javascript 不是很好...
这里是a link to the site如果你想看一下以获得更好的理解

非常感谢您提前抽出宝贵时间，这个真的让我受不了!

Answer 1

您最好只在单击每个链接时从每个链接中添加和删除 .selected 类。然后将 .selected 类设置为具有 white-button.png 的背景图像。您需要将点击处理程序添加到您的导航链接，以便它首先从所有这些链接中删除所有现有的 .selected 类，然后将 .selected 添加到您点击的链接上。

CSS

.navigation a.selected
{
  background-image: url(../img/white-button.png);
}

Javascript - 我看到您使用的是 jQuery，因此这很容易。将下面的代码添加到您的初始化部分。我还没有测试过这个脚本，但它应该非常接近。

// Add click event handler to all navigation links
$('.navigation a').click(function() {
  // First remove selected class from all navigation links
  $('.navigation a').removeClass('selected');  
  // Now add the selected class to the current link
  $(this).addClass('selected');
});

编辑:我稍微调整了一下并添加了一个 jsfiddle 供您查看它的运行情况: http://jsfiddle.net/VCaSV/