在主页上使导航透明，否则默认[关闭]答案

【问题标题】：make navigation transparent when on home page otherwise default [closed]在主页上使导航透明，否则默认[关闭]
【发布时间】：2019-09-19 20:01:55
【问题描述】：

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

我尝试使用 javascript 通过检查地址栏 URL 来解决这个问题，但后来我意识到我无法捕捉到主页 URL。

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

【问题讨论】：

为主页提供它自己的类或 ID，然后从那里开始。

标签： javascript html css bootstrap-4

【解决方案1】：

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

【讨论】：

【解决方案2】：

我认为你应该使用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 类，在其中指定文本和背景颜色。

【讨论】：