Question

我可能以错误的方式做到了这一点。我制作了一个导航栏，其中包含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>

Answer 1

您的网页有哪些内容？ WordPress的？ PHP？静态html页面？

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

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

Answer 2

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

href处于活动状态时更改图像

2 个答案: