Question

我一直在尝试向我的网站添加一些AJAX / jQuery脚本，以便在您浏览网站时只加载主要内容，因此顶部的导航不会重新加载。

这是我的网站结构：

<div id=container>

 <div id="header">

  <!-- Header + Navigation Buttons, same throughout the site. -->

 </div>

 <div id="main">

  <!-- content of each page, different on each page. -->

 </div> 

</div>

另请注意，每个导航按钮都会指向不同子目录上的index.php文件，例如www.mysite.com/contact,www.mysite.com/comments等。

如何让#header在整个网站中停留，所以当我点击导航栏中导航栏没有重新加载的链接时，＃main内容会不会？

我最终还希望将转换添加到#main内容中，因此当您浏览网站时，在页面加载时永远不会看到空白页 - 而是您将始终看到导航栏等。并且#main内容会淡入淡出。

以前，我用过这个：

<script type="text/javascript">
$('#main').load('/subdirectory/ #main');
</script>

但它不起作用（注意我写了正确的子目录），整个页面将正常重新加载。

如果你能帮助我，我会非常感激！

提前致谢！ mlazim14

Answer 1

<script type="text/javascript">
  $(document).ready(function() {
    $('#main').load('/subdirectory/ #main');
  });
</script>

Answer 2

那应该有用。你确定地址是否正确？也许整个页面都没有加载。试试这个，然后'echo'index.php文件中的内容：

$(function() {
    $('#main').load('/comments/index.php');
});

当页面准备就绪时，执行上述函数内的代码。请参阅jQuery .ready()。

仅加载页面内容

2 个答案: