Question

我想创建一个简单的网页，使用2列设计，使用HTML / CSS / Javascript / jQuery的一些组合，其中一列包含带有多个链接的导航菜单，然后单击链接更改内容另一栏。现在最好的办法是什么？

很久以前，我学会了用框架做到这一点，一个框架中的菜单和另一个框架中的内容，以及形式为<a href="something.html" target="name-of-content-area">的锚标签包围的菜单项。我想这种方式还有可能吗？

有些人建议将菜单和内容区域设为div而不是框架，然后在内容div中放置iframe。然后按照刚才描述的相同方式完成菜单项链接。

还有其他人建议仅使用div - 没有框架或iframe - 并使用Javascript更改内容区域中的内容，即锚标记采用类似<a href="#" onclick=func>的形式，其中func动态更改内容中的内容区域。

最后，有些人建议仅使用div并在菜单中使用按钮而不是锚标签，并再次使用附加到按钮的Javascript来调整内容区域内容。

我想我错过了更多的选择。是否有一个普遍接受的现代最佳实践，如果它是我列出的那个之一，哪一个，为什么？如果没有一个最佳实践，使用每个替代“好”选项的情况或原因是什么？

Answer 1

有多种方法可以做到这一点：

帧
单独的页面，每个页面都包含一个公共导航段
其中包含多个虚拟页面的单个页面

选项1和2是不言自明的。 2超过1的优点是书签和浏览器历史记录非常简单。很多人现在正朝着3转向。

这是一个简单的JSFiddle，我把它放在一起作为选项3的一个例子。它很难看，是的，我没有打扰造型。

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;
}

正如@RobG上面所说，浏览器认为它当前都是一页。但是，使用类似JQuery BBQ的内容，可以毫不费力地重新添加（例如，请参阅here）。

为什么选择div超过帧？原因有多种。

框架无法加入书签（请参阅上面的警告）。
框架的过渡和动画支持非常有限，并且单独的完整页面不存在。我在上面的小提琴中做了一个简单的淡入/淡出来演示div的可能性。
当用户更改＆＃34; page＆＃34;时，不需要重新加载任何内容。（虽然相反，可能需要预先加载更多）。

如何设计网页导航菜单，调整页面单独部分的内容

1 个答案: