Question

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

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

当用户在主页上时，他应该看到第一张图像，第二张图像应该被隐藏。当用户在第二页上时，他应该看到第二张图像，第一张图像应该被隐藏。

任何css / angular / javascript都可以实现这个目的吗？。

提前致谢。

Answer 1

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

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

.light, .dark {
  display: none;
}

其次，您需要通过检查window.location：

从网址获取网页名称

var path = window.location.pathname;
var page = path.split("/").pop();

然后您需要在条件中检查当前页面：

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) {}检查根（只是一个尾部斜杠）。

希望这有帮助！：）

Answer 2

使用jQuery：

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

JS：

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

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

2 个答案: