Question

我无法弄清楚为什么我的jquery / javascript无法显示在我加载的网页上。当我把它放在实际的HTML文件中时，它可以工作。

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

NMC

＆＃13;

$(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');
 });
}

 });
}

 });
}

＆＃13;

#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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

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

ap:~ ap$ /ansible/inventory/ec2.py --refresh-cache
Traceback (most recent call last):
  File "/ansible/inventory/ec2.py", line 1510, in <module>
    Ec2Inventory()
  File "/ansible/inventory/ec2.py", line 186, in __init__
    self.do_api_calls_update_cache()
  File "/ansible/inventory/ec2.py", line 492, in do_api_calls_update_cache
    self.get_elasticache_replication_groups_by_region(region)
  File "/ansible/inventory/ec2.py", line 722, in get_elasticache_replication_groups_by_region
    self.add_elasticache_replication_group(replication_group, region)
  File "/ansible/inventory/ec2.py", line 1198, in add_elasticache_replication_group
    dest = replication_group['NodeGroups'][0]['PrimaryEndpoint']['Address']
TypeError: 'NoneType' object has no attribute '__getitem__'

Answer 2

你的JS文件真的搞砸了，我想这就是你要找的......

            $(function() {

                $('#one').hide();
                $('#two').hide();
                $('#three').hide();

                $("#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');

            });

我的Jquery / Javascript无法连接！ - 适用于HTML - 编程新功能

2 个答案: