Javascript JQuery只有在控制台中键入时才会淡出
我正在尝试创建一个简单的导航栏，当点击时内容会淡入淡出；但是，我的Javascript JQuery只有在控制台中键入时才会淡出,javascript,jquery,Javascript,Jquery,我正在尝试创建一个简单的导航栏，当点击时内容会淡入淡出；但是，我的fadeOut（）jQuery调用不会在警报出现时导致我的div元素褪色。如果复制fadeOut（）行并将其粘贴到控制台中，元素将淡出。有人知道为什么fadeOut（）不起作用吗？任何帮助和提示都将不胜感激 HTML <!DOCTYPE html> <head> <link REL=stylesheet HREF="./styles/style.css" TYPE="text/css" MEDIA
fadeOut（）fadeOut（）fadeOut（）HTML<!DOCTYPE html>
<head>
<link REL=stylesheet HREF="./styles/style.css" TYPE="text/css" MEDIA=screen>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="./js/main.js"></script>
</head>
<html>
<body>
<ul>
<li><a class=active id="home-btn" href="">Home</a></li>
<li><a id="about-btn" href="">About me</a></li>
<li><a href="./data/resume.pdf">Resume</a></li>
<li><a id="contact-btn" href="">Contact</a></li>
</ul>
<div id="home" style="margin-left:20%;padding:1px 16px;height:1000px;">
<p>Hi, I'm Austin. Check out my site.</p>
</div>
</body>
</html>
$(document).ready(function(){
$( "#about-btn" ).click(function() {
$( "#home" ).fadeOut("slow");
alert("clicked");
});
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
height: 100%
background-color: #f1f1f1;
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
li a {
text-align: center;
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
.active {
background-color: #6b8d2f;
color: black;
}
CSS<!DOCTYPE html>
<head>
<link REL=stylesheet HREF="./styles/style.css" TYPE="text/css" MEDIA=screen>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="./js/main.js"></script>
</head>
<html>
<body>
<ul>
<li><a class=active id="home-btn" href="">Home</a></li>
<li><a id="about-btn" href="">About me</a></li>
<li><a href="./data/resume.pdf">Resume</a></li>
<li><a id="contact-btn" href="">Contact</a></li>
</ul>
<div id="home" style="margin-left:20%;padding:1px 16px;height:1000px;">
<p>Hi, I'm Austin. Check out my site.</p>
</div>
</body>
</html>
$(document).ready(function(){
$( "#about-btn" ).click(function() {
$( "#home" ).fadeOut("slow");
alert("clicked");
});
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
height: 100%
background-color: #f1f1f1;
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
li a {
text-align: center;
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
.active {
background-color: #6b8d2f;
color: black;
}
要查看输出，需要使用默认值
$（文档）.ready（函数（）{
$（“#关于btn”）。单击（功能（e）{
e、 预防默认值（）；
美元（“#家”）。淡出（“慢”）；
});
});
ul{
列表样式类型：无；
保证金：0；
填充：0；
宽度：20%；
身高：100%
背景色：#f1f1；
位置：固定；/*使其粘住，即使在滚动上*/
溢出：自动；/*如果sidenav的内容太多，则启用滚动*/
}
李阿{
文本对齐：居中；
显示：块；
颜色：#000；
填充：8px 16px；
文字装饰：无；
}
/*更改悬停时的链接颜色*/
李娜：停下来{
背景色：#555；
颜色：白色；
}
.主动{
背景色：#6b8d2f；
颜色：黑色；
}
嗨，我是奥斯汀。查看我的网站
这是因为您正在元素上使用单击事件。您需要阻止默认事件。将您的JS更改为：
$(document).ready(function(){
$( "#about-btn" ).click(function(event) {
event.preventDefault(); // the new line
$( "#home" ).fadeOut("slow");
});
});
您好，请在jquery下面尝试此操作。使用“防止默认值”可防止按钮的默认操作，它也可用于警报！如果你在淡出前使用。如果你在淡出后使用，虽然会起作用，但不会太明显
.. 希望能有帮助
$(document).ready(function(){
$( "#about-btn" ).on('click',function(e) {
e.preventDefault();
alert("clicked");
$( "#home").fadeOut("slow");
});
});
警报是一种阻止功能。在警报关闭之前，页面JS不会运行。我只是插入了它以确保click（）函数正在运行。即使没有警报，也不会褪色。为什么要包括2个jquery版本？请删除该警报（）
，或将其放置在fadeOut（）
之前。它正常工作。只是分别尝试了这两种方法，但都没有解决问题。