我一开始有一个弹出消息，我希望当您单击按钮时它消失。问题是，当您单击按钮时，它不会消失。这是代码：
html：
<!DOCTYPE html>
<html>
<head>
<title>GEOMETRY</title>
<link rel="stylesheet" href="infographic.css"/>
<script src="jquery-1.11.2.js"></script>
<script src="jquery-ui.js"></script>
</head>
<body>
<div id="alert">
<p id="bef">BEFORE WE BEGIN...</p>
<p class="bef2">I started this site way too late to test on multiple browsers. What this means is, if you're not viewing on Chrome, things may be very different. I'm primarily concerned about the fonts. You'll still be able to read it, but it could very well be all in Sans-Serif. Which will hinder your user experience. So keep that in mind.</p>
<p class="bef2">Also, I didn't make this thing very supportive of different screen sizes. It should be relatively fine across the board, because all margins are percentages, but there are extremes where things get ugly. Keep that in mind also.</p>
<p class="bef2">Enjoy!</p>
<div id="igotya">
<p class="menu">I got ya bro.</p>
</div>
</div>
<p class="h1">GEOMETRY</p>
<p class="sub">Everything you never wanted to know.</p>
<p class="mainp">You now when you try to re-visit your high school days, but you just can't? Like when you say to yourself, "Man, I really wish I was sitting in a high school classroom learning trigonometry right now," or, "Jesus, if only I could get someone to give me a bunch of work to do, on topics I'll never remember."</p>
<p class="mainp">Well now, you've got a complete guiding resource to do it yourself!</p>
<p class="mainp">Mostly...</p>
<p class="mainp">This will give you all the information you always wish you never knew about four basic geometry concepts. Know exactly what you're looking for? Use the buttons to skip ahead.</p>
<div id="simp">
<p class="menu">Simplifying Radicals</p>
</div>
<div id="pyth">
<p class="menu">Pythagorean Theorem</p>
</div>
<div id="down">
<div id="arrow"></div>
</div>
<div id="sp">
<p class="menu">Special Triangles</p>
</div>
<div id="trig">
<p class="menu">Trigonometry</p>
</div>
<script type="text/javascript">
var igotya = $("#igotya");
var box = $("#alert");
igotya.click = (function() {
alert("Hello!");
box.css("position", "none");
});
</script>
</body>
</html>
CSS：
@font-face {font-family: Hip Light; src: url("Fonts/Hipstelvetica UltraLight.ttf");}
body {
background: #962626;
}
#alert {
position: absolute;
display: inline;
z-index: 2;
background: #962626;
width: 60%;
margin-top: 60px;
margin-left: 20%;
border: 3px solid white;
border-radius: 30px;
text-align: center;
}
#bef {
color: white;
font-family: Courier, Courier New, sans-serif;
font-size: 65px;
margin-bottom: 0px;
margin-top: 10px;
}
.bef2 {
color: white;
font-family: Courier, Courier New, sans-serif;
margin-left: 10%;
margin-right: 10%;
}
#igotya {
float: left;
width: 15%;
margin-left: 42.5%;
border: 2px solid white;
border-radius: 10px;
margin-bottom: 20px;
margin-top: 20px;
transition: border .5s, color 0.5s;
-webkit-transition: border .5s, color 0.5s;
cursor: pointer;
color: white;
}
#igotya:hover {
border: 2px solid #721515;
color: #721515;
}
.h1 {
text-align: center;
color: white;
font-family: Hip Light, Courier, Courier New, sans-serif;
font-size: 100px;
margin-bottom: 0px;
margin-top: 70px;
text-decoration: underline;
}
.sub {
text-align: center;
color: white;
font-family: Courier, Courier New, sans-serif;
margin-top: 0px;
margin-bottom: 50px;
font-size: 20px;
}
.mainp {
text-align: center;
color: white;
font-family: Courier, Courier New, sans-serif;
margin-left: 20%;
margin-right: 20%;
}
#simp {
height: 50px;
width: 15%;
float: left;
margin-left: 6%;
margin-top: 50px;
border: 2px solid white;
border-radius: 10px;
transition: background .5s, color .5s;
-webkit-transition: background 1s, color 1s;
cursor: pointer;
color: white;
}
#simp:hover {
background: white;
color: #962626;
}
#pyth {
height: 50px;
width: 15%;
float: left;
margin-left: 2%;
margin-top: 50px;
border: 2px solid white;
border-radius: 10px;
transition: background .5s, color .5s;
-webkit-transition: background .5s, color .5s;
cursor: pointer;
color: white;
}
#pyth:hover {
background: white;
color: #962626;
}
#down {
height: 80px;
width: 6%;
float: left;
margin-left: 9%;
margin-top: 50px;
border: 2px solid white;
border-radius: 10px;
transition: border .5s;
-webkit-transition: border .5s;
}
#down:hover {
border: 2px solid #962626;
}
#arrow {
height: 40px;
width: 40px;
border-bottom: 2px solid white;
border-right: 2px solid white;
transform: rotate(45deg);
margin-left: 20px;
margin-top: 10px;
}
#sp {
height: 50px;
width: 15%;
float: right;
margin-right: 6%;
margin-top: 50px;
border: 2px solid white;
border-radius: 10px;
transition: background .5s, color .5s;
-webkit-transition: background .5s, color .5s;
cursor: pointer;
color: white;
}
#sp:hover {
background: white;
color: #962626;
}
#trig {
height: 50px;
width: 15%;
float: right;
margin-right: 2%;
margin-top: 50px;
border: 2px solid white;
border-radius: 10px;
transition: all .5s;
-webkit-transition: all .5s;
cursor: pointer;
color: white;
}
#trig:hover {
background: white;
color: #962626;
}
.menu {
text-align: center;
font-family: Courier, Courier New, sans-serif;
}
我已经链接到jQuery。我想消失的div是#Alert，当您单击#igotya时，我希望它消失。如您所见，我还设置了一个警报框，以确定该功能是否正在启动。警报框是不是弹出的，因此触发必须是一个问题（可能只是错字，但对于我的一生，我找不到它）。想法，任何人？
2件事，1）.click（）是一个函数，因此您需要将处理程序作为参数传递给该函数，2）以隐藏元素调用.hide .hide（）
var igotya = $("#igotya");
var box = $("#alert");
igotya.click(function () {
alert("Hello!");
box.hide();
});
演示：小提琴
如果我把你正确，当客户端单击'#igotya'按钮时，您不再需要此警报弹出，以便您可以删除它：
var igotya = $("#igotya");
$(igotya).click(function(){
$('#alert').remove();
});
var igotya = $("#igotya");
$(igotya).click(function(){
$('#alert').remove();
});@font-face {font-family: Hip Light; src: url("Fonts/Hipstelvetica UltraLight.ttf");}
body {
background: #962626;
}
#alert {
position: absolute;
display: inline;
z-index: 2;
background: #962626;
width: 60%;
margin-top: 60px;
margin-left: 20%;
border: 3px solid white;
border-radius: 30px;
text-align: center;
}
#bef {
color: white;
font-family: Courier, Courier New, sans-serif;
font-size: 65px;
margin-bottom: 0px;
margin-top: 10px;
}
.bef2 {
color: white;
font-family: Courier, Courier New, sans-serif;
margin-left: 10%;
margin-right: 10%;
}
#igotya {
float: left;
width: 15%;
margin-left: 42.5%;
border: 2px solid white;
border-radius: 10px;
margin-bottom: 20px;
margin-top: 20px;
transition: border .5s, color 0.5s;
-webkit-transition: border .5s, color 0.5s;
cursor: pointer;
color: white;
}
#igotya:hover {
border: 2px solid #721515;
color: #721515;
}
.h1 {
text-align: center;
color: white;
font-family: Hip Light, Courier, Courier New, sans-serif;
font-size: 100px;
margin-bottom: 0px;
margin-top: 70px;
text-decoration: underline;
}
.sub {
text-align: center;
color: white;
font-family: Courier, Courier New, sans-serif;
margin-top: 0px;
margin-bottom: 50px;
font-size: 20px;
}
.mainp {
text-align: center;
color: white;
font-family: Courier, Courier New, sans-serif;
margin-left: 20%;
margin-right: 20%;
}
#simp {
height: 50px;
width: 15%;
float: left;
margin-left: 6%;
margin-top: 50px;
border: 2px solid white;
border-radius: 10px;
transition: background .5s, color .5s;
-webkit-transition: background 1s, color 1s;
cursor: pointer;
color: white;
}
#simp:hover {
background: white;
color: #962626;
}
#pyth {
height: 50px;
width: 15%;
float: left;
margin-left: 2%;
margin-top: 50px;
border: 2px solid white;
border-radius: 10px;
transition: background .5s, color .5s;
-webkit-transition: background .5s, color .5s;
cursor: pointer;
color: white;
}
#pyth:hover {
background: white;
color: #962626;
}
#down {
height: 80px;
width: 6%;
float: left;
margin-left: 9%;
margin-top: 50px;
border: 2px solid white;
border-radius: 10px;
transition: border .5s;
-webkit-transition: border .5s;
}
#down:hover {
border: 2px solid #962626;
}
#arrow {
height: 40px;
width: 40px;
border-bottom: 2px solid white;
border-right: 2px solid white;
transform: rotate(45deg);
margin-left: 20px;
margin-top: 10px;
}
#sp {
height: 50px;
width: 15%;
float: right;
margin-right: 6%;
margin-top: 50px;
border: 2px solid white;
border-radius: 10px;
transition: background .5s, color .5s;
-webkit-transition: background .5s, color .5s;
cursor: pointer;
color: white;
}
#sp:hover {
background: white;
color: #962626;
}
#trig {
height: 50px;
width: 15%;
float: right;
margin-right: 2%;
margin-top: 50px;
border: 2px solid white;
border-radius: 10px;
transition: all .5s;
-webkit-transition: all .5s;
cursor: pointer;
color: white;
}
#trig:hover {
background: white;
color: #962626;
}
.menu {
text-align: center;
font-family: Courier, Courier New, sans-serif;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="alert">
<p id="bef">BEFORE WE BEGIN...</p>
<p class="bef2">I started this site way too late to test on multiple browsers. What this means is, if you're not viewing on Chrome, things may be very different. I'm primarily concerned about the fonts. You'll still be able to read it, but it could very well be all in Sans-Serif. Which will hinder your user experience. So keep that in mind.</p>
<p class="bef2">Also, I didn't make this thing very supportive of different screen sizes. It should be relatively fine across the board, because all margins are percentages, but there are extremes where things get ugly. Keep that in mind also.</p>
<p class="bef2">Enjoy!</p>
<div id="igotya">
<p class="menu">I got ya bro.</p>
</div>
</div>
<p class="h1">GEOMETRY</p>
<p class="sub">Everything you never wanted to know.</p>
<p class="mainp">You now when you try to re-visit your high school days, but you just can't? Like when you say to yourself, "Man, I really wish I was sitting in a high school classroom learning trigonometry right now," or, "Jesus, if only I could get someone to give me a bunch of work to do, on topics I'll never remember."</p>
<p class="mainp">Well now, you've got a complete guiding resource to do it yourself!</p>
<p class="mainp">Mostly...</p>
<p class="mainp">This will give you all the information you always wish you never knew about four basic geometry concepts. Know exactly what you're looking for? Use the buttons to skip ahead.</p>
<div id="simp">
<p class="menu">Simplifying Radicals</p>
</div>
<div id="pyth">
<p class="menu">Pythagorean Theorem</p>
</div>
<div id="down">
<div id="arrow"></div>
</div>
<div id="sp">
<p class="menu">Special Triangles</p>
</div>
<div id="trig">
<p class="menu">Trigonometry</p>
</div>您可以使用此脚本，并且可以使用。
$("#igotya").click(function(){
$("#alert").hide();
});