jquery - 使用 ajax 和 tab 从 div id 获取内容

Question

我有一个带有 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"获取内容 我该怎么做？

以及如何在内容加载后添加淡入淡出效果？

Answer 1

用这个替换你的$.ajax()电话：

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

请参阅有关加载页面片段的jQuery ajax文档。.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;
    });
});