1
4

3 に答える 3

1

あなたが望むものは、 と呼ばれる簡単な言葉Ajaxです。

Ajax を使用して、まずサーバーにリクエストを送信し、次のようにページ コンテンツをロードできます。

$.ajax({
 url: "page_url"
});

次に、成功したら、次のようにデータを div に書き込みます。

$.ajax({
 url: "page_url",
 success: function (data) {
  $('#content').html(data);
});

このようにして、コンテンツはそこにとどまりますが、そのコンテンツは更新されます!

URL も変更する場合は、window.locationまたはを使用しますwindow.href。

もう 1 つの方法は、最初にすべてのコンテンツをロードすることです。次に、jQuery を使用して div を次のように表示/非表示にします。

$('#nav li').click(function () {
  $('#content').hide();
  $('#newcontent').show(); // this is a new div 
                           // that you will show once click is done.
}

クリックすると、div が非表示になり、新しいコンテンツを持つ他の div が表示されます。この方法では、サーバーへの新しいリクエストを作成する必要はなく、コンテンツを非表示/表示するだけです。ページにスタイルを追加することもできます。

clickこのようにして、任意の要素で次のようなイベントが発生したときに Web ページに表示されるコンテンツを変更できます。jQueryこれらを処理するには、API を使用する必要があります。

注:これは簡単な方法です。同じことを行う機会は他にもたくさんあります。

頑張れ兄弟！乾杯。

これらのテクノロジーへの参照:

アヤックスの場合:

Mozilla 開発者ネットワークから: https://developer.mozilla.org/en/docs/AJAX

jQuery API から: http://api.jquery.com/jQuery.ajax/ (必読)

jQuery の場合:

jQuery から: http://www.jquery.com/

jQuery API から: http://api.jquery.com/

于 2013-10-06T17:46:55.460 に答える
1

@afzaal の提案から、ajax 呼び出しを使用してサーバーからデータを取得する必要があります。ただし、メソッドを使用して、タグ.load()内のコンテンツを自動的に切り替えることができます。#content

$('#content').load('http://url.com #content');

これに加えて、フェード イン/アウト アニメーションでコンテンツを遷移させたい場合は、それをトリガーするクラス変更で css トランジションを使用できます。

$('#nav li').on('click', function(){ //on a menu item click
    $('#content').one('transitionend, function(){ //called .one() because we only want it to fire once
        $('#content').load('http://url.com #content', function(){ //load content form server via ajax. The #content form the requested page will be appended to the #content of the current DOM
            $('#content').removeClass('animating'); //remove class; will trigger exit transition
        });
    });
    $('#content').addClass('animating'); //add class; will kick off transition
});

コンテナーがフェードアウトするときの transitionend イベントにのみバインドする必要があるため、.one()関数を使用します。これは、コンテンツが非表示になるとすぐに .load() 呼び出しを開始できるようにするためです。新しいコンテンツが表示されたら何もすることがないので、css fadeIn がいつ完了するかを知る必要はありません。

そして、これに伴う簡単な（テストされていない、または検証されていない）cssトランジションは次のとおりです。

#content{opacity:1; transition: opacity 2s;}
#content.animating{opacity:0;}

注: transitionendは、その要素で CSS トランジションが終了したときにスローされ、キャッチされます。完全な互換性を得るには、すべての主要なブラウザー (Chrome、Opera、Firefox、IE) のすべての差異を追加する必要があります。

注 2 : css トランジションでも同じことが言えます。すべてのブラウザとの完全な互換性のために、すべてのトランジションのバリエーションを追加してください。

于 2013-10-06T18:09:24.203 に答える
0

悲しいことに、CSS には onClick イベントがなく、イベントがトリガーされる要素以外の要素をターゲットにすることもできません。

ただし、これはjavascriptで行うことができます。

于 2013-10-06T17:45:28.473 に答える