当href处于活动状态时更改图片

我可能是以错误的方式做到这一点的。我制作了一个带有4个图像的导航栏，链接到其他页面。导航栏在每个页面上都应该是。我可以将鼠标悬停在图片上以更改来源，但如果我在特定页面上，我也想更改来源。当href处于活动状态时更改图片

例如，当我点击“购物车”时，我的网站将我导航到该页面，导航栏看起来完全相同。我想要我点击的图片更改为不同的图片，只有当我在该页面上。如果我转到其他页面，我希望图像恢复到原始状态。用户应该能够看到所有4张图片，而'购物车'是唯一一张看起来不同的图片，暗示他们在购物车页面

基本上，我在寻找类似于Twitter的东西已经完成了。（当您在'主页'页面上以及在'连接'页面上时，图像会发生变化）。

我试过了：active和：focus类，那些对我不起作用。也许我需要一些Javascript？我真的不确定。我搜索谷歌上下。我会很感激任何帮助，即使它只是我可以测试的新文档。

任何事情！谢谢:)

html: 
<nav> 
<ulstyle="list-style-type:none"> 
<li id="daily_sale" style="display:inline"><a href="/DealOfTheDay.asp?deal="></a></li> 
<li id="my_account" style="display:inline"><a href="/login.asp"></a></li> 
<li id="support" style="display:inline"><a href="/terms.asp"></a></li> 
<li id="shopping_cart" style="display:inline"><a href="/shoppingcart.asp"></a></li> 
</ul> 
</nav>

来源

2013-10-22 MrBlonde

代码在哪里。如果您不提供问题 – gwillie

您可以使用css类来达到这个目的，我们该如何提供帮助。由于导航栏在所有页面中都可用，因此适当地在适当的页面中使用类。 – 2013-10-23 00:04:37

我已经添加了我的代码。我写了班。我想我想要做的是添加一个类，如果URL是其中之一。我搜索了上下，并尝试了几个不同的JS函数，但似乎没有为我工作:( – MrBlonde

什么是您的网页与？ WordPress的？ PHP？静态html页面？

理想情况下，您需要将类添加到当前所在的导航栏项目中。例如，如果您在主页上，请向您的列表项中添加一个“活动”类。

然后，您可以为活动类添加CSS以更改背景图像。

来源

2013-10-23 00:06:04 bsk1998mn

我的网页是静态的HTML/ASP。我有一个类，每个href包含在，每个href有它自己的类也（所以我可以识别A从B等） – MrBlonde

您可以使用javascript中的location.href属性来检测当前页面，并将一些额外的CSS类添加到相应的菜单项。

来源

2013-10-23 00:07:25 Zergatul

我不熟悉这个属性（或熟练的javascript），但我会开始做一些研究，谢谢！ – MrBlonde

当href处于活动状态时更改图片

回答

相关问题