0

我想知道如何创建一个页面布局如下的动态网站：页眉、部分、页脚

页眉和页脚始终是静态的，当用户单击导航的一部分时，例如关于我们（在页眉内），中间的部分会动态变化并在 About Us 部分中淡出。

如果可能的话，我想使用纯 javascript，并且它不是服务器端的一部分，我假设你会给出部分 ID，并且在导航链接的 javascript “onClick”中，一个部分将显示：无，另一部分将显示代替它。

我在这个网站上找到了一个类似的例子：http ://www.templatemonster.com/demo/44858.html

创造这种效果的最简单方法是什么？我有一个非常简短的想法，但你怎么能这样做呢？

如果有人可以包含一个 jsfiddle 示例，将不胜感激

4

3 回答 3

1

您可以使用 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);

于 2013-06-24T15:25:08.293 回答
1

您要做的事情称为 pjax。Pjax 使用 XML Http requests(ajax) 将特定的内容加载到占位符中，就像您尝试做的那样。

有人点击进入新页面。Javascript 从服务器请求此页面。加载后，可选择淡出旧内容。替换为新内容并可选择淡入。使用 pushstate 将状态添加到浏览器历史记录。这允许后退和前进按钮工作。

这是一个 pjax 库，可以方便地在新旧浏览器中轻松执行此操作，并且有很好的解释： https ://github.com/defunkt/jquery-pjax

使用 display:none 将所有内容包含在一个页面上并不是一个好主意，因为即使用户从不查看它，浏览器仍然需要下载它。不过，这里有一个 JSfiddle 展示了这种方法，它与您所描述的很接近：

http://jsfiddle.net/Tb4eQ/

//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');
        })
    });
});
于 2013-06-24T13:17:27.410 回答
0

您可以尝试使用 Ajax 调用来部分刷新页面的一部分，或者只加载整个页面并让 jQuery 处理点击事件中元素的隐藏和显示。

http://www.w3schools.com/ajax/

http://api.jquery.com/hide/

于 2013-06-24T13:16:53.930 回答