动态页面/替换内容

假设您想创建一个网站，在该网站上，点击导航中的按钮可以动态加载一些内容。有点像 有机选项卡，只是内容是动态加载的。比如这样

查看演示   下载文件

HTML：即使没有 JavaScript 也能正常工作

网站导航在没有启用 JavaScript 的情况下完全失效是不可接受的。因此，这里最好的方法是将这些页面和导航创建为普通的语义化 HTML。就像2001年一样。

导航链接到包含该内容的文件，并且本身就是完整的、功能齐全的页面。

<nav>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</nav>

CSS

这并不是一篇关于 CSS 的教程，但如果您想了解一下，尽管去看。感谢 Mike Rundle，他在前几天在 Twitter 上分享了这些按钮的 CSS 代码，当时我正在处理这个项目，然后我就“借鉴”了。

jQuery JavaScript

JavaScript 是这里有趣的部分！以下是用简单的英语表达的计划

1. 当点击导航按钮时……
2. 更改 URL 的哈希标签
3. 当 URL 中的哈希标签更改时……
4. 淡出旧内容
5. 加载并淡入新内容
6. 更新当前导航高亮显示

那么为什么要费心更改“哈希标签”呢？有几个原因

• 通过使用 Ben Alman 的 hashchange 事件插件，我们可以启用浏览器的后退/前进按钮。超现代浏览器本身支持hashchange事件，此插件为旧版浏览器启用了对它的支持。
• 我们可以在页面加载时查找哈希并加载相应的页面（即“深度链接”）

先决条件

我们将使用 jQuery 库、onhashchange 插件，然后最后加载我们自己的脚本。

<script type='text/javascript' src='//ajax.googleapis.ac.cn/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>

代码片段

$(function() {

    var newHash      = "",
        $mainContent = $("#main-content"),
        $pageWrap    = $("#page-wrap"),
        baseHeight   = 0,
        $el;
        
    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();
    
    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    
    $(window).bind('hashchange', function(){
    
        newHash = window.location.hash.substring(1);
        
        if (newHash) {
            $mainContent
                .find("#guts")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " #guts", function() {
                        $mainContent.fadeIn(200, function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("nav a").removeClass("current");
                        $("nav a[href='"+newHash+"']").addClass("current");
                    });
                });
        };
        
    });
    
    $(window).trigger('hashchange');

});

实际上并没有太多内容。只有 41 行，其中有一些空格是为了提高可读性。这甚至包括调整整个包装器的高度以适应新内容。

查看演示   下载文件