Javascript 使用jquery加载外部页面

我正在尝试使用jQuery将外部页面加载到当前页面中，而不让用户看到页面加载

当我调用页面'info.php'时，它被加载到

#content

div中。这就是脚本应该做的。问题在于，在包含脚本和

#content

div的主页中，我已经有了一些代码，我希望在有人访问页面时执行这些代码，而不是从任何外部页面调用它们。这是可行的，但当我点击菜单中的一个链接时，我无法返回到初始内容

以下是我的代码的一个例外：

<script>
$(function() {
   $('#nav a').click(function() {
    var page = $(this).attr('href');
    $('#content').load(page + '.php');
    return false;
    });
});
</script>

<ul id="nav">
<li><a href="#">Page1</a></li>
<li><a href="about">About</a></li>
<li><a href="contact">Contact</a></li>
<li><a href="info">Info</a></li>
</ul>

<div id="content">
Here I have some code that I wanted to be attributed to the "Page1"
</div>

$（函数（）{
$（'#导航a'）。单击（函数（）{
var page=$（this.attr（'href'）；
$（'#content'）.load（page+'.php'）；
返回false；
});
});






这里我有一些代码，我想被归于“Page1”

我不太熟悉load（），但在这种情况下，我认为您应该使用ajax加载页面而不刷新

var page = $(this).attr('href');
$.ajax({
  url: page + '.php',
  success: function(data)
  {
     $('#content').html(data);
  }
})

编辑：你说“当我点击菜单中的一个链接时，我无法返回到初始内容”，你的意思是说你在div内容中有一些代码，一旦点击你就覆盖了它的内容吗？

以下是示例：

$(function()
{
   var content = $('#content');

   $('#nav a').click(function(e) {
       e.preventDefault();
       var page = $(this).attr('href');

       content.children().hide();
       var pageContent = content.find("#" + page);
       if(pageContent.length > 0)
       {
           pageContent.show();
       }
       else // put ajax here
       {
           content.append($('<div>').attr('id', page).text('New page ' + page));
       }
   });
});

$（函数（）
{
var content=$（“#content”）；
$（#导航a'）。单击（功能（e）{
e、 预防默认值（）；
var page=$（this.attr（'href'）；
content.children（）.hide（）；
var pageContent=content.find（“#”+page）；
如果（pageContent.length>0）
{
pageContent.show（）；
}
否则//把ajax放在这里
{
content.append（$（''）.attr（'id'，page.）.text（'newpage'+page））；
}
});
});

---

演示：

您无法返回，因为您覆盖了它而没有存储它的副本。将内容存储在变量中，如果有人单击Page1链接，则将div的内容设置为变量的内容。确切地说，当我访问页面时，div内容中的所有内容都会被查看，当我单击菜单的任何选项卡时，它会被覆盖，我无法再次查看它，所以你只需要创建另一个div，这样你就有了2个div标签，你只需要切换它们来隐藏和/或显示。或者将您希望显示页面加载的部分放在另一个页面上，并将其设置为先显示，就像您对page+“.php”所做的一样。他试图创建类似于使用ajax加载的jquery ui选项卡的内容。示例：@webdeveloper是对的，除了“预加载”选项卡将是写在#content div中的代码，所有其他选项卡将是外部页面谢谢，但它对我不起作用，尽管它在演示中似乎工作得很好。@esandrkwn在

else

块中，只需添加您的ajax逻辑即可。我确实这样做了，基本上，else块应该调用外部页面，因为我在那里添加了我的代码，但它不起作用——这是导致错误的原因404@user1688011在浏览器控制台中检查服务器代码和路径。