javascript - Return False 被忽略

Question

为什么下面的“return false”被忽略并在新窗口中打开 URL 页面有什么想法吗？单击时，外部 URL 应加载到内容 div 中。

我的 HTML:

<div id="maincontainer">
<div id="mainnav">
<a class="menuitem" id="home" href="#">Home</a>
<a class="menuitem" id="about" href="about.html">About</a>
<a class="menuitem" id="contact" href="contact.html">Contact</a>
</div>
<div id="content"></div>
<div id="footer">
<p><a class="menuitem" id="find" href="find.html">Find...</a></p>
</div>
</div>
</div>

我的脚本:

$('#home a').click(function(){
$("#content").hide();
$("#slider1_container").fadeIn();
});

$('#about a').click(function() {
$("#slider1_container, #contact, #find").hide();
  var url=$(this).attr('href');
  $('#content').load(url);
  return false;
});

$('#contact a').click(function() {
$("#slider1_container, #about, #find").hide();
  var url=$(this).attr('href');
  $('#content').load(url);
  return false;
});

$('#find a').click(function() {
$("#slider1_container, #about, #contact").hide();
  var url=$(this).attr('href');
  $('#content').load(url);
  return false;
});  

Answer 1

您的 #home、#about 和 #contact 元素没有后代 a 元素，因此您的选择器不正确并且事件根本没有被 Hook 。将 $("#home a") 更改为简单的 $("#home")(对于 about、contact 也是如此)。

---

旁注:您还可以压缩最后三个 click 处理程序，因为它们都做同样的事情，唯一的区别是哪个元素没有隐藏:

$('#home a').click(function(){
  $("#content").hide();
  $("#slider1_container").fadeIn();
});

$("#about, #contact, #find").click(function() {
  $("#slider1_container, #about, #contact, #find").not(this).hide();
  var url=$(this).attr('href');
  $('#content').load(url);
  return false;
});

注意使用 .not(this) 来避免隐藏当前元素。