Question

我的导航有5个按钮[主页，关于，服务，事件，联系人]，每个按钮的背景图像为＆＃34; blue-button.png＆＃34;。我想把它切换到＆＃34; white-button.png＆＃34;当用户在该部分时我希望它像a：active一样简单，但它没有，我会解释原因;

所有内容都以叠加显示。建立网站的方式，你永远不会离开索引页面，但内容被加载到索引页面。这就是a：active不起作用的原因。

现在，例如，当用户打开＆＃34;关于＆＃34;页面，内容（我将调用＆＃34;关于主要＆＃34;）出现，并链接到＆＃34;关于我＆＃34;，＆＃34;关于你＆＃34;和＆＃ 34; FAQ＆＃34 ;.我想要＆＃34;关于＆＃34;每当用户处于与＆＃34;关于＆＃34;的任何区域时，用于更改背景图像（白色）的按钮。（关于Main，关于我，关于您，常见问题解答）...我还希望当用户进入不同的部分（EX：联系人）时按钮变回蓝色，然后让联系人按钮变为白色。

我注意到告诉用户所在位置的唯一方法是，他们所使用的叠加层的css样式为display:block，而其他所有内容都隐藏在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/

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

1 个答案: