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

Javascript for changing background image depending on area user is in

本文关键字：区域 改变 背景 图像 用户 Javascript      更新时间：2023-09-26

我的导航栏有5个按钮[Home, About, Services, Events, Contact]，每个按钮的背景图片为"blue-button.png"。我想把它改成"white-button。png"当用户在那个区域时。我希望它像a:active一样简单，但是它不是，我将解释为什么;

所有的内容显示在一个覆盖。网站建立的方式，你永远不会离开索引页，但内容被加载到索引页。这就是a:active不起作用的原因。

现在，例如，当用户打开"About"页面时，内容(我将其称为"About Main")出现，并有"About- me"，"About- you"answers"FAQ"的链接。我希望"关于"按钮改变背景图像(白色)，每当用户在任何属于"关于"的区域(关于主，关于我，关于你，常见问题)…我还希望按钮改变回蓝色，当用户去到不同的部分(EX:联系)，然后有联系人按钮变成白色。

我注意到告诉用户在哪里的唯一方法是，他们所覆盖的css样式为display:block，而所有其他的都隐藏在display:hidden…

所以，我认为javascript类似于这样:

if (About Main, About Me, About You, FAQ)是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…
这里有一个网站的链接，如果你想更好地理解

提前感谢你的时间，这个真的要杀了我!

当你点击每个链接时，你最好只是添加和删除一个.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');
});

EDIT:我稍微调整了一下，并添加了一个jsfiddle让你看到它的作用:http://jsfiddle.net/VCaSV/

相关文章：