在首页上使导航透明，否则默认

Question

我正在创建一个导航，其中尝试放置两个背景 1.透明（仅当用户访问主页时显示） 2.默认颜色（当用户访问其他页面时）

我尝试通过检查地址栏URL来使用javascript解决此问题，但随后我意识到我无法捕获首页URL。

有人知道如何解决这个问题吗？

Answer 1

我认为您应该使用document.location.pathname。这将返回您域名之后的所有内容，并忽略哈希（http://example.com/#hash）和查询字符串（？key = value＆ke1 = value1）。 这是一个例子

// put here your homepage paths
var homepagePaths = ["/", "/index.php", "/index.html", "/index.htm"];

if(homepagePaths.indexOf(document.location.pathname) === -1) { // if the path is not the homepage
    document.getElementById("navbar").style.backgroundColor="#0e1623";
    // or
    // document.getElementById("navbar").classList.add("coloured-navbar");
}

您可以在此处为导航栏着色或设置特定的CSS类，在其中指定文本和背景颜色。

Answer 2

您可以在其他选项卡上添加不透明度'OnClick'。 在点击事件中使用CSS opacity到您的主页。