Question

我试图创建一个简单的导航栏，在点击时淡入淡出内容;但是，我的fadeOut() jQuery调用根本不会导致我的div元素在警报出现时淡出。如果我复制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>

JS

$(document).ready(function(){
  $( "#about-btn" ).click(function() {
    $( "#home" ).fadeOut("slow");
    alert("clicked");
  });
});

CSS

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

Answer 1

您需要使用preventDefault来查看输出

＆＃13;

$(document).ready(function(){
  $( "#about-btn" ).click(function(e) {
    e.preventDefault();
    $( "#home" ).fadeOut("slow");
  });
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

＆＃13;

Answer 2

这是因为您在click元素上使用a事件。您需要阻止默认事件。将您的JS更改为：

$(document).ready(function(){
  $( "#about-btn" ).click(function(event) {
    event.preventDefault(); // the new line
    $( "#home" ).fadeOut("slow");
  });
});

Answer 3

你好试试下面的jquery.Use防止默认阻止按钮的默认动作它也适用于警报！如果你在fadeout之前使用。如果你在淡出之后使用它会工作，但它不会有很多可见性 ..希望它有所帮助

 $(document).ready(function(){
 $( "#about-btn" ).on('click',function(e) {
 e.preventDefault();
 alert("clicked");
 $( "#home").fadeOut("slow");
 });
 });

JQuery淡出只在键入控制台时才有效

3 个答案: