5

我想做一个像菜单一样的东西，所以每个菜单项都包含不同的内容，但我不想重新加载页面。所以我做了这样的东西。

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

4

2 回答 2

2

您可以使用对象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);
});
于 2012-09-09T13:58:20.973 回答
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();
});​

看看这个小提琴上面的工作原理。请注意，我已经删除了 hide 元素，因为我不知道它的用途。

于 2012-09-09T14:04:59.363 回答