1

私がやろうとしていること：

#leftSide          #rightSide (display:none)
 _______________ _______________________________________________
|               |                                               |
| category      |                                               |
|  -link        |                                               |
|  -link        |                                               |
|               |                                               |
| category      |                                               |
|  -link        |                                               |
|  -link        |                                               |
|               |              content                          |
|               |                                               |
|               |                                               |
|               |                                               |
|               |                                               |
|               |                                               |
|               |                                               |
|               |                                               |
|               |                                               |
|_______________|_______________________________________________|

カテゴリ内のリンクをクリックするたびに、#rightSideそのリンクのコンテンツでフェードインしたいと思います。

onclickでフェードインする方法は知っていますが、ページを更新せずに毎回新しいコンテンツを読み込む方法がわかりません。

助けていただければ幸いですが、必ずしも呼ばれるとは限りません。ページを更新せずにコンテンツをロードする、これが呼ばれるものはありますか？どんなポインタでもありがたいです。

4

4 に答える 4

3

ページを更新せずにコンテンツをロードする、これが呼ばれるものはありますか？

それがAjaxです。

rel問題については、左側のサイドバーにあるリンクに属性を割り当てます。

<a href="#" rel="div_1">Link 1</a>
<a href="#" rel="div_2">Link 2</a>
<a href="#" rel="div_3">Link 3</a>

次に、属性と同じ値を持つ各リンクの要素（コンテンツ領域内にあると想定されます）に割り当てidます。divrel

<div id="div_1">Div 1</a>
<div id="div_2">Div 2</a>
<div id="div_3">Div 3</a>

jQueryを使用すると、次のことを行うだけで済みます。

$('a[rel^=div]').click(function(){
  $('#' + this.rel).fadeIn();
});

このように、リンクがクリックされると、jQueryはその値を読み取り、コンテンツ領域に対応するdiv要素を表示します。

于 2012-06-07T20:36:27.600 に答える
0

ロード方法を見てください。クリックイベントを処理し、AJAX / .loadを介してコンテンツをプルし、必要な効果を適用します。何かのようなもの：

$("link").click(function() {
    var $content = $("#rightSide");

    $content.fadeOut(1000, function() {
        // Load content after transition is completed
        $content.load("aUrl", function() {
            // Show content after content is fetched
            $content.fadeIn(1000);
        });
    }); 

    return false;
});
于 2012-06-07T20:34:26.833 に答える
0

非常に基本的な実装：

$('#left-list').on('click', 'a:link', function(){
    var href = $(this).attr('href');
    $('#right-side').fadeOut(500, function(){
        $(this).load(href, function(){
            $(this).fadeIn(500);
        });
    });

    return false;
});

ただし、URLの更新など、検討したいことがいくつかあります。

この記事をご覧ください：http ：//tutorialzine.com/2009/09/simple-ajax-website-jquery/-URLの保持を含むjQueryを使用したコンテンツの読み込みについて説明しています。

于 2012-06-07T20:34:40.717 に答える
0

フェードアウトと同時にajaxリクエストをすぐに送信し#rightSide、新しいコンテンツが利用可能になったらすぐにフェードインを開始します。

$("#leftSide").on("click","a[href]",function(e){
    e.preventDefault();
    $("#rightSide").stop(true,true).fadeOut();
    $.get(this.href).done(function(){
        $("#rightSide").stop(true,true).fadeIn();
    });
});

この方法の利点は、右側がフェードアウトしたときではなく、コンテンツが即座にロードを開始し、前のコンテンツがフェードアウトするのを待つのではなく、利用可能になるとすぐにコンテンツがフェードインし始めることです。

このシナリオでアニメーションを使用することはお勧めしませんが、それがあなたの呼びかけです。

于 2012-06-07T20:57:44.623 に答える