0

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

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

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

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

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

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

4

1 回答 1

2

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

  1. 框架
  2. 单独的页面，每个页面都包含一个公共导航段
  3. 包含多个虚拟页面的单个页面

选项 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之类的东西，可以毫不费力地重新添加（例如，请参见此处）。

为什么要选择 div 而不是框架？有各种原因。

  1. 框架不能加书签（见上面的警告）。
  2. 帧的过渡和动画支持非常有限，并且对于单独的完整页面，它是不存在的。我在上面的小提琴中做了一个简单的淡入/淡出来演示 div 的可能性。
  3. 当用户更改“页面”时，不需要重新加载任何内容（尽管相反，可能需要预先加载更多内容）。
于 2013-02-21T04:45:00.890 回答