1

我可能做错了。我制作了一个导航栏，其中包含 4 个链接到其他页面的图像。导航栏应该在每个页面上。我可以将鼠标悬停在图像上以更改来源，但如果我在特定页面上，我也想更改来源。

例如，当我单击“购物车”时，我的网站会将我导航到该页面，并且导航栏看起来完全相同。我希望我单击的图像更改为不同的图像，仅当我在该页面上时。如果我转到不同的页面，我希望图像恢复到原始状态。用户应该能够看到所有 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>
4

2 回答 2

1

您的页面是用什么构建的？WordPress？php？静态html页面？

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

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

于 2013-10-23T00:06:04.580 回答
1

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

于 2013-10-23T00:07:25.797 回答