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

Question

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

我有四个页面：index.php, about.php, contact.php, products.php当访问者访问该网站时，通过输入“ http://mysite.com ”他们会看到“index.php”页面。

如果他们点击一个链接，比如说“关于”，那么“索引”页面将被删除，“about.php”的内容会显示在 div 中content-loaded我尝试了以下操作：

jQuery：

$(document).ready(function() {

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

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

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

   //....
});

HTML：

<div class="menu">
   <a href="#" class="home">Home</a>
   <a href="#" class="about">About</a>
</div>

  <div id="content-loaded">

  </div>

但这不起作用。它同时显示索引页面和关于页面。任何人都可以提出任何改进/答案或更优雅的方式来构建它吗？

谢谢

Answer 1

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

$(document).ready(function() {

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

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

   //....
});

Answer 2

Using jQuery 1.9.1 and the following source code, worked for me.

<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>