css Code在Codepen中可以工作，但在我的网站上不行

pexxcrt2 于 2023-02-06 发布在其他

关注(0)|答案(3)|浏览(130)

我真的是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的一个问题，我真的很感激如果有人能帮助我。谢谢。

css

来源：https://stackoverflow.com/questions/47591643/code-works-in-codepen-but-not-on-my-site

3条答案

按热度按时间

mrphzbgm1#

如果您检查网站上的控制台（按F12，或右键单击〉Inspect），则会看到一个错误：
未定义$
这是因为，尽管您已经在页面中包含了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');
  });
}

赞(0）回复(0）举报 2023-02-06

kqhtkvqz2#

我想是因为如果你去设置，然后点击js，你会看到有添加外部脚本/笔在那部分，会有一些网址。复制它们，把它们放在你的网站上。

赞(0）回复(0）举报 2023-02-06

ggazkfy83#

在脚本标记中，