两列网页，菜单使用 Jquery 加载单独的 HTML 文件

Two column webpage, menu loading seperate HTML files with Jquery

本文关键字：加载 Jquery 单独 文件 HTML 菜单 两列 网页      更新时间：2023-09-26

听起来很简单，但到目前为止，我在谷歌上找不到的东西都不起作用。我在这里发现了一个类似的问题，其解决方案看起来与我正在寻找的解决方案完全相同：http://jsfiddle.net/sJ6Bj/4/

这是 HTML：

<html>
    <head>
        <title>Two-pane navigation</title>
    </head>
    <body>
        <div id="content">
            <div id="navigation">
                <h1>Navigation</h1>
                <ul>
                    <li><a href="#page1" class="page-link">Page 1</a></li>
                    <li><a href="#page2" class="page-link">Page 2</a></li>
                </ul>
            </div>
            <div id="pages">
                <div id="page1" class="page">
                    <h1>Page 1</h1>
                    <p>This is all the lovely content on page 1.</p>
                    <p>Let's add a bunch of stuff to make it scroll.</p>
                    <p style="font-size: 72px">.<br/>.<br/>.<br/>.<br/>.<br/>.</p>
                    <p>This is at the bottom of the page.</p>
                </div>
                <div id="page2" class="page">
                    <h1>Page 2</h1>
                    <p>This is all the lovely content on page 2.</p>
                </div>
            </div>
        </div>
    </body>
</html>

JavaScript（假设加载了JQuery）：

$(document).ready(function() {
    $(".page-link").on("click", function(e) {
        $(".page").fadeOut(250);
        setTimeout(function() { $($(e.currentTarget).attr("href")).fadeIn(250); }, 250);
    });
});

.CSS：

#navigation {
    position: fixed;
    width: 250px;
    height: 100%;
    border-right: 1px solid black;
}
#pages {
    margin-left: 270px; /* 250px + 20px of actual margin */
}
.page {
    position: relative;
    display: none;
    overflow: scroll;
}

唯一的问题是，我想通过自动播放加载不同的 Youtube 视频。这意味着在给定的示例中，您已经听到了后面播放的所有音频。为了确保这种情况不会发生，我想加载包含YouTube视频的不同，单独的html文件。

提前感谢。

理想情况下，您应该通过 AJAX 加载页面。这将解决Youtube内容在后台播放的问题。并大大减少初始页面加载时间。

.HTML 

<html>
    <head>
        <title>Two-pane navigation</title>
    </head>
    <body>
        <div id="content">
            <div id="navigation">
                <h1>Navigation</h1>
                <ul>
                    <li><a href="page-1.html" class="page-link">Page 1</a></li>
                    <li><a href="page-2.html" class="page-link">Page 2</a></li>
                </ul>
            </div>
            <div id="pages">
                <!-- ajax content loads here -->
            </div>
        </div>
    </body>
</html>

Javascript/jQuery

$(document).ready(function() {
    $(".page-link").on("click", function(e) {
        $.get($(this).attr('href'))
        .done(function(data) {
            $('#pages').html(data);
        });
        return false;
    });
});
相关文章：