我真的是 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 的问题，如果有人能帮助我，我将不胜感激。谢谢。
最佳答案
如果您检查您网站上的控制台(按 F12，或右键单击 > 检查)，您将看到一个错误:
$ is not defined
这是因为，虽然您在页面中包含了 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');
});
}
关于javascript - 代码在 Codepen 中有效，但在我的网站上无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47591643/