我想知道如何创建一个页面布局如下的动态网站： 页眉、节、页脚
页眉和页脚始终是静态的，当用户单击导航的一部分时，例如关于我们（在页眉内），中间部分会动态变化并在“关于我们”部分中淡出。
如果可能的话，我想使用纯 javascript，如果它不是服务器端的一部分，我假设您会在导航链接的 javascript "onClick" 中提供部分 ID 和部分将 display:none 并且另一个部分将显示在 replace 中。
我在这个网站上找到了一个类似的例子：http://www.templatemonster.com/demo/44858.html
创建这种效果的最简单方法是什么？我有一个非常简短的想法，但你怎么能这样做呢？
如果有人可以包含一个 jsfiddle 示例，将不胜感激
【问题讨论】：
标签： javascript onclick nav
您要执行的操作称为 pjax。 Pjax 使用 XML Http requests(ajax) 将特定的内容加载到占位符中，就像您尝试做的那样。
有人点击进入新页面。 Javascript 从服务器请求此页面。 加载后，可选择淡出旧内容。 替换为新内容并可选择淡入。 使用 pushstate 将状态添加到浏览器历史记录。这允许后退和前进按钮工作。
这是一个 pjax 库，可以方便地在新旧浏览器中轻松执行此操作，并且有一个很好的解释： https://github.com/defunkt/jquery-pjax
使用 display:none 将所有内容包含在一个页面上并不是一个好主意，因为这样即使用户从未查看过它，浏览器仍然需要下载它。不过，这里有一个 JSfiddle 展示了这种方法，它与您所描述的很接近：
//Wait for html to be loaded
$(document).ready(function(){
//Store reference to frame to load content into in a var, as well as the content to load in.
var $content = $('#div_1');
var $frame = $('#my_frame');
//Bind an event handler to the click event of something
$('#press').on('click', function(){
//fade out the frame, swap in the new content, and fade it back in.
$frame.fadeOut('fast', function(){
$frame.html($content.html()).fadeIn('fast');
})
});
});
【讨论】：
您可以使用 jQuery 方法 .load() 从服务器加载数据并将返回的 HTML 放入匹配的元素中。 .toggle() 方法还允许您显示或隐藏元素。
考虑以下示例：假设我们有一个名为 index.html 的页面 ...
<header>
<nav>
<ul><li id="nav-about">About us</li></ul>
</nav>
</header>
<section>
<article id="dynamic-viewer">
Dynamic content will be placed here!
</article>
</section>
<aside>
<div id="loader" style="display:none">
<img src="http://www.ajaxload.info/images/exemples/24.gif" />
</div>
</aside>
... 我们还有另一个名为 about.html 的文件，它只是一个视图：
<div>
<h2>About us</h2>
<p>This content is placed dynamically into #dynamic-viewer</p>
</div>
现在，我将使用 jQuery.load() 方法将 about.html 的内容加载到 index.html 的内容包装器中。
//Click handler to load the "about" view
$(document).on("click.about", '#nav-about', function() {
fnShowLoading(true);
//Loads the content dynamically
$('#dynamic-viewer').load('views/about.html', function() {
fnShowLoading(false);
});
});
//Shows or hides the loading indicator
function fnShowLoading (show) {
$('#loader').toggle(!!show);
}
实际上，这里唯一重要的行是：
//loads the content dynamically
$('#dynamic-viewer').load('views/about.html', function() { });
//shows or hides the loader section
$('#loader').toggle(!!show);
【讨论】：
您可以尝试使用 Ajax 调用来部分刷新页面的某些部分，或者只加载整个页面并让 jQuery 处理点击事件中元素的隐藏和显示。
【讨论】：