用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; 
}