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が初めてです...

すべて正常に動作しますが、2 つの質問があります。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、おそらく 1 回しか存在しないため、クラスではなく 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 に答える