任何想法为什么"返回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;
});
答案 0 :(得分:3)
您的#home
,#about
和#contact
元素没有后代 a
元素,因此您的选择器不正确且事件根本没有被吸引。将$("#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)
来避免隐藏当前元素。
答案 1 :(得分:1)
#about a
等不匹配任何内容。 #about a
符合以下内容:
<div id="about"><a href="example.html">this</a></div>
你想:
$('a#about')
或者,真的,只是:
$('#about')
因为ID是唯一的。