Javascript 在具有单个HTML文件的两个图像之间切换

我有两个网页共用的顶部导航栏，我的根URL/和firstpage/firstpage。 在顶部导航栏中有两个图像，我想根据用户所在的页面在这些图像之间切换。 代码如下：

<img class="dark" src="/images/icons/IMAGE_home.png">
<img class="light" src="/images/icons/IMAGE1_page2.png">

当用户在主页上时，他应该看到第一个图像，第二个图像应该隐藏起来。当用户在第二个页面上时，他应该看到第二个图像，并且第一个图像应该被隐藏

有没有css/angular/javascript技巧可以实现这一点

---

提前感谢。

这样的事情通常可以通过后端脚本来完成，但使用JavaScript和CSS肯定是可能的

首先，将两个图像设置为默认隐藏：

.light, .dark {
  display: none;
}

其次，您需要通过检查window.location从URL获取页面名称：

然后，您需要在以下条件下对照当前页面进行检查：

if (page == 'firstpage') {
   document.getElementsByClassName("light")[0].style.display = 'block';
}
else {
  document.getElementsByClassName("dark")[0].style.display = 'block';
}

在上面的示例中，/firstpage将有IMAGE1_page2.png，而其他每个页面都有IMAGE_home.png。可以使用if page{}检查尾随斜杠的根

希望这有帮助！：

使用jQuery：

---

主页主体元素上的类，加上设置显示属性的CSS？/firstpage将显示IMAGE1_page2.png，而所有其他页面将还原为其他图像。

if (page == 'firstpage') {
   document.getElementsByClassName("light")[0].style.display = 'block';
}
else {
  document.getElementsByClassName("dark")[0].style.display = 'block';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

$( document ).ready(function() {
    if (location.pathname == "/firstpage") {
        $(".light").hide();
        $(".dark").show();
    } else {
        $(".dark").hide();
        $(".light").show();
    }
});