0

ajaxをロードするjQueryタブがあります。

<script type='text/javascript'>
$(document).ready(function() {
    $("#nav li a").click(function() {

        $("#ajax-content").empty().append("<div id='loading'><img src='{THEME}/images/loading.gif' alt='Loading' /></div>");
        $("#nav li a").removeClass('current');
        $(this).addClass('current');

        $.ajax({ url: this.href, success: function(html) {
            $("#ajax-content").empty().append(html);
            }
    });
    return false;
    });
});
</script>

HTMLコード：

<ul id="nav">
  <li><a href="test1.html">Page 1</a></li>
  <li><a href="test2.html">Page 2</a></li>
</ul>
<div id="ajax-content">This is default text, which will be replaced</div>

すべてがうまく機能していますが、何か他のものが必要です。

test1.htmlとtest2.htmlの回答IDを持つdivからコンテンツを取得する必要があります。すべてのページをロードしたくありません。

それらのページには、私の回答用のdiv、私のtest1.htmlページがあります。

<div>Questions</div>
Some Questions

<div id="answers">Some answers</div>

id = "answers"からコンテンツを表示して取得する必要があり ます。これを行うにはどうすればよいですか？

また、コンテンツがロードされた後にフェードイン効果を追加するにはどうすればよいですか？

4

1 に答える 1

3

$.ajax()通話を次のように置き換えます。

var location = this.href +" #answers";
$("#ajax-content").load(location);

ページフラグメントのロードについては、 jQueryajax.load()のドキュメントを参照してください。

完全なコード：

$(document).ready(function() {
    $("#nav li a").click(function() {

        $("#ajax-content").html("<div id='loading'><img src='{THEME}/images/loading.gif' alt='Loading' /></div>");

        $("#nav li a").removeClass('current');
        $(this).addClass('current');

        var location = this.href +" #answers";
        $("#ajax-content").load(location);

        return false;
    });
});
于 2012-08-23T00:49:05.760 に答える