javascript - 仅定位首页

我有以下针对我的导航的代码（基于窗口位置添加特定的类。使用Wordpress。

js

jQuery(document).ready(function($){
  $(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 250) {
     $("#s-nav").addClass('s-nav-w');
     $(".main-nav li a").addClass('text-w');
  } else{
     $("#s-nav").removeClass('s-nav-w');
     $(".main-nav li a").removeClass('text-w');
  }
 });
});

我想在所有页面上使用相同的导航。但是，我想要

$("#s-nav").addClass('s-nav-w');
$(".main-nav li a").addClass('text-w');

保持添加在所有内部页面（主页以外的所有页面）上，我希望可以修改代码而不是创建单独的header.php。

最佳答案

一种典型的方法是检测仅位于主页上的某个对象，并根据缺少仅位于主页上的内容使用if有条件地执行代码。您没有向我们展示您的实际HTML，所以我将演示这个概念：

假设您有一个仅显示在您首页上的div：

<div id="homepage">...</div>

然后，您可以在jQuery中使用它：

// execute some jQuery on all pages except the home page
if (!$("#homepage").length) {
    $("#s-nav").addClass('s-nav-w');
    $(".main-nav li a").addClass('text-w');
}

当然，您也可以检测到不是主页的所有页面，并逆转逻辑。两者都可以正常工作。

如果您需要有关如何精确执行首页检测的帮助，那么我们将不得不更多地了解您的首页HTML以及与其他网页的不同之处。

由于首页的内容与其他页面相比总是唯一的，因此该页面中几乎总是可以识别出唯一的内容。或者，如果您与其他页面分开控制主页的内容，则只需添加一个空div作为标识主页的标记即可。



您还可以使用页面的路径：

// execute some jQuery on all pages except the top level page
// if your home page is some other path than "/", then substitute the appropriate path
if (window.location.pathname !== "/") {
    $("#s-nav").addClass('s-nav-w');
    $(".main-nav li a").addClass('text-w');
}