jquery 在不在特定页面上时应用样式

Question

我正在尝试将一种样式应用到我的导航栏，特别是当我在索引页面以外的任何页面上时，但我似乎无法让它工作，我不确定问题是什么。

这是我的脚本：

$(document).ready(function(){

  if (window.location.pathname != "") {

    $('#main-nav').css('background-color', 'black');

  }

});

如果重要的话，我正在使用 Angular 10。

Answer 1

您没有提到索引的路径是什么。我猜它可能是“/”或“索引”。检查您的索引路径，然后比较代码中的路径

if (window.location.pathname != "" 

    || window.location.pathname != "/"

        || window.location.pathname != "index") {

            $('#main-nav').css('background-color', 'black');

}

Answer 2

由于您使用的是 Angular 10，因此您可以使用路由器并添加样式，这非常容易。

Angular Router 在你的 component.ts 文件中注入 Angular 路由器

Constructur(public router: Router){

  //After Logging check the url string and add it to the ngClass condition

  console.log(router.url);

}

然后在你的 html 文件中，在你的案例中，将 navbar html 文件添加到 navbar 标签中，添加 ngClass。NgClass 指令

[ngClass]="{'customStyle': router.url=== '/'}"

在您的导航栏组件 css 文件中。

.customStyle{

background-color: "black"

}

Answer 3

请试试这个：

$(document).ready(function(){

  if (window.location.pathname != "" || window.location.pathname.indexOf("index")>0) {

    $('#main-nav').css('background-color', 'black');

  }

});