jquery - 用ajax调用页面内容

Question

我有一些代码在工作，所以当你点击导航时，它会将 href 文本加载到滑动内容框中。

但是，我想将页面 #content 加载到我们使用 AJAX 的页面上的 #content 中。

这是HTML：

<ul>
<li><a href="about.php">about</a></li>
<li><a href="gallery.php">gallery</a></li>
<li><a href="suppliers.php">suppliers</a></li>
<li><a href="contact.php">contact</a></li>
</ul>

这是jQuery：

var lastData;
$(function () {
    $("ul li a").click(function(event) {
        loadData($(this).attr("href") +' #content');
        event.preventDefault();
    });
});

function loadData(data) {
    if(lastData == data) {
        $("#content-container").slideUp();
    } else {
        //$('#content').load(toLoad)
        $('#content').html(data);
        $("#content-container").slideDown();
         $('#close').click(function(){
              $('#content-container').slideUp('5000');
          })
    }
    lastData = data;
}

任何帮助都会很棒。到目前为止，我是如此接近...... jquery 不是我最强的技能。

谢谢

Answer 1

var lastData;
$(function () {
    $("ul li a").click(function(event) {
        loadData($(this).attr("href"));
        event.preventDefault();
    });
    /* I'm assuming #close is added dynamically */
    $('document').on("click", "#close", function(){
        $('#content-container').slideUp('5000');
    });
});

function loadData(data) {
    if(lastData == data) {
        $("#content-container").slideUp();
    } else {
        $('#content').load(data);
        $("#content-container").slideDown();             
    }
    lastData = data;
}