使用jQuery将页面加载到div元素中并删除当前加载的页面

我正在尝试动态加载内容/页面，而不必离开页面或更改页面。假设如下：

我有四个页面：

index.php、about.php、contact.php、products.php

，当访问者访问该网站时，输入“”就会看到“index.php”页面

如果他们点击一个链接，比如说“about”，那么“index”页面将被删除，“about.php”的内容将显示在加载的div

内容中

我尝试了以下方法：

jQuery：

$(document).ready(function() {

   $("#content-loaded").load("index.php");

   $('.about').click(function() {

       $("#content-loaded").load("about.php");
   });

   //....
});

HTML:

但这是行不通的。它同时显示索引页面和关于页面。有没有人能提出一些改进/答案，或者提出一种更优雅的结构

---

谢谢

请尝试清理以前的内容。看看这是否有效：

$(document).ready(function() {

   $("#content-loaded").load("index.php");

   $('.about').click(function(evt) {
       $("#content-loaded").empty();
       $("#content-loaded").load("about.php");
       evt.preventDefault();
   });

   //....
});

---

使用jQuery1.9.1和以下源代码，对我来说很有用

<script type="text/javascript"> 
$(document).ready(function() {

   $("#content-loaded").load("index.php");

   $('.about').click(function() {
       $("#content-loaded").empty();
       $("#content-loaded").load("about.php");
   });

   $('.home').click(function() {
       $("#content-loaded").empty();
       $("#content-loaded").load("index.php");
   });

   //....
});
</script>

$（文档）.ready（函数（）{
$（“#内容加载”）.load（“index.php”）；
$（'.about'）。单击（函数（）{
$（“#内容已加载”）.empty（）；
$（“#内容加载”）.load（“about.php”）；
});
$（'.home'）。单击（函数（）{
$（“#内容已加载”）.empty（）；
$（“#内容加载”）.load（“index.php”）；
});
//....
});

我尝试了这个，它清除了它，但是“index.php”页面刚刚出现back@user1326876尝试$（'.about'）。单击（函数（evt）{$（“#内容加载”）.empty（）；$（“#内容加载”）.load（“about.php”）；evt.preventDefault（）；}）；非常感谢。我不认为你可以推荐一种方法来允许，比如说，如果有人输入了

http://mysite.com/about.php

进入他们的浏览器，然后它会显示页面，就像他们在单击链接一样？所以目前，它只是显示文本，而不是网站的实际布局。。如果这有意义的话？我建议你不要使用JS。只需在index.php页面中添加一个变量。例如，这是常见的做法，而且更容易做到。您只需在index.php文件的开头检查

$\u GET['page']

变量，然后添加特定内容。您可以使用

include

将其他php文件（关于、联系等）中的内容直接插入index.php。

<script type="text/javascript"> 
$(document).ready(function() {

   $("#content-loaded").load("index.php");

   $('.about').click(function() {
       $("#content-loaded").empty();
       $("#content-loaded").load("about.php");
   });

   $('.home').click(function() {
       $("#content-loaded").empty();
       $("#content-loaded").load("index.php");
   });

   //....
});
</script>