javascript - 我的 Jquery/Javascript 无法连接! - 在 HTML 中工作 - 编程新手

Question

我不明白为什么我的 jquery/javascript 不会显示在我加载的网页上。 当我将它放入实际的 HTML 文件中时，它就可以工作了。

每次我尝试链接 js、jquery 文件时都会失败。我不明白。请帮忙!!

NMC

$(document).ready(function(){

window.onload=function(){
$('#one').hide();
$('#two').hide();
$('#three').hide();

});

$(function() {
 
  $("#menu-circle").on("mouseenter", function() {
	var i = $(this).index();
	$("#one").eq(i)
	  .show().siblings().hide();
  });
  
$("#menu-circle1").on("mouseenter", function() {
	var i = $(this).index();
	$("#two").eq(i)
	  .show().siblings().hide();
  });

$("#menu-circle3").on("mouseenter", function() {
	var i = $(this).index();
	$("#three").eq(i)
	  .show().siblings().hide();
  }); 
 
$('html,body').animate({ scrollTop: 9999 }, 'slow');
 });
}

 });
}

 });
}

#one {
	text-decoration: none;
	font-size: 100px;
	height: 50%;
	width: 80%;
	margin-top: 20%;
	position: fixed;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 10%;
	vertical-align: middle;
	margin-right: 50%;
	justify-content: left;
	color: rgba(255, 255, 255, 0.62);
	z-index: 1;
	background-color:rgba(109, 104, 104, 0.54)
}

#two {
	text-decoration: none;
	font-size: 100px;
	height: 50%;
	width: 80%;
	margin-top: 20%;
	position: fixed;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 10%;
	vertical-align: middle;
	margin-right: 50%;
	justify-content: left;
	color: rgba(255, 255, 255, 0.62);
	z-index: 1;
	background-color:rgba(109, 104, 104, 0.54)
}
	
#three {
	text-decoration: none;
	font-size: 100px;
	height: 50%;
	width: 80%;
	margin-top: 20%;
	position: fixed;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 10%;
	vertical-align: middle;
	margin-right: 50%;
	justify-content: left;
	color: rgba(255, 255, 255, 0.62);
	z-index: 1;
	background-color:rgba(109, 104, 104, 0.54)
}

.wrapper {
	width: 100%;
	height: 2500px;
	margin-top: -30px;
	background-image: url("joaquinmiller.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	filter: grayscale (100%);
	-webkit-filter: grayscale(100%); 
	filter: grayscale(100%);
}

.wrapper:hover {
   -webkit-filter: grayscale(0%); 
   filter: grayscale(0%);
}

.menunav {
  cursor: pointer;
  display: inline;
  position: fixed;
  z-index: 1;
  margin-left: 90%;
  margin-top: 40%;
}

#menu-circle {
	width: 40px;
	height: 40px;
	background: gray;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	margin: auto;
	margin-top: 20px;
	opacity: 1.0;
}

.menu-text {
	text-align: center;
  	text-decoration: none;
	font-family: 'Oswald', sans-serif;
	font-weight:700;
	letter-spacing: .07em;
	opacity: 1;   
}

.menu-item:hover #menu-circle{
    background:yellow;
    opacity: 1.0;
}

.menu-item:hover .menu-text{
    text-decoration: none;
    color: yellow;
    opacity: 1.0;
    text-decoration: none;
}

#menu-circle1 {
	width: 40px;
	height: 40px;
	background: gray;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	margin: auto;
	margin-top: 20px;
	opacity: 1.0;
}

.menu-text1 {
	text-align: center;
  	text-decoration: none;
	font-family: 'Oswald', sans-serif;
	font-weight:700;
	letter-spacing: .07em;
	opacity: 1;   
}

.menu-item1:hover #menu-circle1 {
    background:yellow;
    opacity: 1.0;
}

.menu-item1:hover .menu-text1 {
    text-decoration: none;
    color: yellow;
    opacity: 1.0;
    text-decoration: none;
}

#menu-circle3 {
	width: 40px;
	height: 40px;
	background: gray;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	margin: auto;
	margin-top: 20px;
	opacity: 1.0;
}

.menu-text1 {
	text-align: center;
  	text-decoration: none;
	font-family: 'Oswald', sans-serif;
	font-weight:700;
	letter-spacing: .07em;
	opacity: 1;   
}

.menu-item3:hover #menu-circle3 {
    background:yellow;
    opacity: 1.0;
}

.menu-item1:hover .menu-text1 {
    text-decoration: none;
    color: yellow;
    opacity: 1.0;
    text-decoration: none;
}


.topcontainer {
	position: !important;
	width: 100%;
	filter: grayscale(100%)
}

.topcontainer:hover {
	filter: grayscale(0%)
}

button {
	height: 100px;
	width: 100px;
	border-style: none;
	color: white;
	font-size: 15px;
}

button p {
	font-size: 10px;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, intial-scale=1">
<title>FINAL</title>
<link rel="stylesheet" type="text/css" href="evenmorepractice.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>

<body>
<header>

</header>

<div class="menunav">
		<div class="menu-item">
			<div id="menu-circle"></div>
		</div>
	
		<div class="menu-item1">
			<div id="menu-circle1"></div>
       </div>
    
		<div class="menu-item3">
			<div id="menu-circle3"></div>
       </div>
	</div>
    	
    <article>
	    	<p id="one">Neighborhoods<button><p>click</p></button></p>
			<p id="two">History<button>click</button></p>
			<p id="three">Housing Crisis<button>readmore</button></p>
	</article>


<div class"whitenav">whitenav</div>
	<div class="wrapper">
	<p class="oakland">OAKLAND</p>
</div>

<script src="script.js"></script>

</body>
</html>

Answer 1

您需要在 html 文件的头部引用您的脚本。因此，在添加 jquery 的标签下方，您需要添加以下内容:

<script src="path\to\your\js\file"></script>