Question

我想制作类似菜单的内容，因此每个菜单项都包含不同的内容，但我不希望页面重新加载。所以我做了类似的事。

$(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）你能告诉我如何同时加载内容......目前当主页加载并点击下载时，它会在淡入淡出时跳转......

Answer 1

您可以使用preventDefault()对象的event方法来阻止事件的默认操作。

$('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);
});

Answer 2

由于你还没有发布你的HTML，我只能猜到你想要在这里实现的目标，但基于此，这里有几点指示：

包含您的内容（主页，下载，关于，联系）的div元素可能只存在一次，因此应该有ID而不是类
挂钩click事件时，请务必使用preventDefault停止触发默认事件
CSS类应该用于样式元素，而不是用于定义JavaScript行为

考虑到上述因素，我创建了一个示例，该示例使用锚点通过使用哈希指向href属性中的元素id，然后使用它来确定要显示的元素。

HTML

<nav>
    <a href="#home">Home</a>
    <a href="#download">Download</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
</nav>

<div id="container">

    <div id="home">
        Home
    </div>

    <div id="download">
        Download
    </div>

    <div id="about">
        About
    </div>

    <div id="contact">
        Contact
    </div>

</div>

的JavaScript

$(function(){
    var $menuItems = $('nav a'),
        $container = $("#container");

    $menuItems.on('click', function(e) {
        e.preventDefault();
        $(this.hash, $container).delay(300).fadeIn(1000).siblings().fadeOut(1000);
    }).first().click();
});

查看this fiddle上述工作原理。请注意，我已经删除了hide元素，因为我不知道它用于什么。

jquery fadein和fadeout同时出现

2 个答案:

HTML

的JavaScript