Question

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

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

如果他们点击链接，让我们说“关于”，然后删除“索引”页面，并在div content-loaded内显示“about.php”的内容我尝试了以下内容：

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

使用jQuery 1.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>

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

2 个答案: