Question

我对Javascript很陌生，而且我一直在努力解决这个问题。我的代码在我的[Codepen]

上工作正常

$(window).on("scroll", function() {
  if ($(window).scrollTop() > 10) {
    $(".topnav").addClass("active");
    $(".mustang").addClass("active");
    $(".sally").addClass("active");
  } else {
    $(".topnav").removeClass("active");
    $(".mustang").removeClass("active");
    $(".sally").removeClass("active");
  }
});

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

然而，它不会在[我的网站]上工作。最大的问题是顶部的导航栏不会改变我网站上的颜色，但在我的Codepen上它会完美地改变。

我几乎可以肯定这是我的Javascript的问题，如果有人可以帮助我，我真的很感激。谢谢。

Answer 1

如果您检查网站上的控制台（按F12，或右键单击＆gt;检查），那么您将看到一个错误：

$未定义

这是因为，虽然您在页面中包含了jQuery，但它需要先首先 - 在您自己的代码之前。

<head>
  <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400" rel="stylesheet">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="post1.css">

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

另请注意，您可以使用toggleClass()并为addClass()提供函数来简化JS逻辑：

$(window).on("scroll", function() {
  $('.topnav, .mustang, .sally').toggleClass('active', $(window).scrollTop() > 10)
});

function myFunction() {
  $('#myTopnav').addClass(function() {
    return $(this).hasClass("topnav") ? 'responsive' : 'topnav');
  });
}

Answer 2

我想是因为如果您转到设置，然后单击js，您将看到在该部分中有“添加外部脚本/笔”，其中将包含一些URL。复制它们并将其放在您的网站上。

代码适用于Codepen，但不适用于我的网站

2 个答案: