如何设计它调整在页面单独的章节内容[关闭]网页导航菜单(How to design webpage

我想创建一个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功能来调整内容区域中的内容。

我想有我已经错过了更多的选择。是否有一个普遍接受的现代最好的做法，如果是的话是那些我已经上市的一个，这一个，为什么？如果有不是一个单一的最佳实践，什么是使用各另类的“好”选项的情况下还是什么原因？

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

框架
单独的页面，每一个都包括共同的导航段
在它的多个虚拟页的单个页面

选项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的烧烤，可以添加回没有太多的精力（例如，见这里）。

为什么人们会选择在帧的div？有多种原因。