Javascript 航路点JQuery甚至基本JQuery代码doen´;行不通
我刚开始编程,这是我第一次使用JQuery。 我正在从事一个HTML/CSS项目,我想使用Waypoint jquery添加一些效果。问题是它不起作用。即使是基本测试(更改元素“sec1 text”的背景色)也不起作用 你能帮我找出问题所在吗? 贝娄,你会找到HTML和JS文件 HTML----------------------------------------------------------Javascript 航路点JQuery甚至基本JQuery代码doen´;行不通,javascript,jquery,css,waypoint,Javascript,Jquery,Css,Waypoint,我刚开始编程,这是我第一次使用JQuery。 我正在从事一个HTML/CSS项目,我想使用Waypoint jquery添加一些效果。问题是它不起作用。即使是基本测试(更改元素“sec1 text”的背景色)也不起作用 你能帮我找出问题所在吗? 贝娄,你会找到HTML和JS文件 HTML---------------------------------------------------------- <!DOCTYPE html> <html lang="pt"> &l
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, inicial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Thais Fachini</title>
<link href="./css/normalize.css" rel="stylesheet">
<link href="./css/reset.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link href="./css/grid.css" rel="stylesheet">
<link href="./css/responsive.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Cagliostro&display=swap" rel="stylesheet">
<link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
</head>
<body class="app">
<!---------------SECTION 1 --------------------------->
<div class="sec1">
<div class="header">
<div class="logo-img"><img src="img/logo_small.png" alt="Logo Thais Fachini" class="logo-img"></div>
<!--Sticky Navigation--><div class="logo-img-sticky"><img src="img/logo_small.png" alt="Logo Thais Fachini" class="logo-img-sticky"></div>
<div class="logo-name"><h1>THAÍS FACHINI</h1><p>Nutrition for Life</p></div>
<!--Sticky Navigation--><div class="logo-name-sticky"><h1>THAÍS FACHINI</h1><p>Nutrition for Life</p></div>
<div class="links">
<nav>
<a href="#" class="header-link">Sobre</a>
<a href="#" class="header-link">Como funciona</a>
<a href="#" class="header-link">Assinar</a>
<a href="#" class="header-link">Cliente</a>
</nav>
</div>
</div>
<div class="sec1-text">
<div class="text">
<p class="sec1-text-title">ALIMENTAÇÃO FUNCIONAL</p>
<p class="sec1-textindent1">para o <span class="strong">equilíbrio</span> do corpo</p>
<p class="sec1-textindent2">e o <span class="strong">prazer</span> de comer bem.</p>
</div>
<div class="buttons">
<nav>
<a href="#" class="btn btn-full">Assinar</a>
<a href="#" class="btn btn-ghost">Cliente</a>
</nav>
</div>
</div>
</div>
<!--------------- ABOUT --------------------------->
<div class="about js--about">
<div class="about-title">
<h2><span class="about-title1">Orientação Nutricional Online</span>
<span class="about-title2">Atendimento Online</span></h2>
</div>
<div class="about-photo-text">
<img src="img/photo_thais.png" alt="Photo Thais Fachini" class="about-photo">
<p>Olá!</p>
<p>Sou Thaís Fachini, nutricionista formada pela Universidade São Camilo, SP e extensões em <span class="strong">Nutrição Funcional</span> e <span class="strong">Nutrição Holística</span>.</p>
<p>Minha filosofia de atendimento lhe ensina a olhar e escutar mais seu corpo e perceber o que funciona para você.</p>
<p>Existem vários fatores em nossa vida que interferem na saúde, nos relacionamentos pessoais, trabalho, espiritualidade e aceitação pessoal. Conduzirei seu processo, indicando ferramentas para sentir-se mais feliz e mais saudável.</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/d3js/5.12.0/d3.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
/*eslint-env jquery*/
(document).ready(function ( ) {
$('sec1-text').click(function(){
$(this).css('background-color', '#ff0000');
});
/* For the sticky navigation */
$('.js--about').waypoint(function(direction) {
if (direction == "down") {
$('header').addClass('sticky');
} else {
$('header').removeClass('sticky');
}
}, {
offset: '60px;'
});
});
您需要参考/加载jQuery模块,您当前只加载您的航路点jQuery模块/资源:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
错误消息是什么,这样我们就可以用正确的dupe正确地关闭它?您没有加载jQuery主库,您只是加载jQuery.waypoints.min.js,您必须在加载jQuery library.js文件之前加载!谢谢你的帮助。我在航路点链接之前添加了您建议的参考,但是没有发生任何变化。仍然不起作用。code.jquery.com/jquery-3.4.1.min.js“>您应该更新您的代码,并开始显示您在问题中遇到的控制台错误。尼斯!在“文档”之前缺少字符“$”。现在是基本测试(背景色变为红色)正在工作。谢谢!!但不是航路点函数。控制台上没有错误。还有其他建议吗?:)您现在有了一个新的问题线索,这个问题已经得到了回答:)。我不知道什么航路点,也不知道我不能就我这里的上下文提供任何建议