我想制作类似菜单的东西,所以每个菜单项包含不同的内容,但我不想要页面重新加载.所以我做了这样的事情.
$(document).ready(function() {
var $hide = $('div#hide'),$home = $('div.home'),$download = $('div.download'),$about = $('div.about'),$contact = $('div.contact');
$hide.css('display','none');
$('a.home').on('click',function() {
$hide.fadeOut();
$home.delay(300).fadeIn(2000);
});
$('a.download').on('click',function() {
$hide.fadeOut();
$download.delay(300).fadeIn(2000);
});
$('a.about').on('click',function() {
$hide.fadeOut();
$about.delay(300).fadeIn(2000);
});
$('a.contact').on('click',function() {
$hide.fadeOut();
$contact.delay(300).fadeIn(2000);
});
});
现在……我相信这可能会更清洁和简化,但我想不出任何事情.我基本上是jQuery的新手……
一切都很好,但我有两个问题.
1)你能让这个剧本更清洁吗？
2)你能告诉我如何同时加载内容…目前当主页加载并点击下载时,它会在fadeIn时跳转…
最佳答案
您可以使用事件对象的preventDefault()方法来阻止事件的默认操作.
$('a.home,a.download,a.about,a.contact').on('click',function(event) {
event.preventDefault();
var cls = this.className;
$hide.fadeOut();
$('.'+cls).delay(300).fadeIn(2000);
});
