使用左右面板设置HTML页面

Question

如何设置包含两个内容边的HTML页面？没有<frames>!

例如:

在左侧应该是导航菜单.在右侧应该是页面的内容.

示例菜单:

<div id="page">
    <div id="menuleftcontent">
        <ul id="menu">
            <li> <a href="showfirstcontent">first</a></li>
            <li><a href="showsecondcontent">second</a></li>
        </ul>
    </div>
    <div id="maincontent">
        <div id="firstcontent">first</div>
        <div id="secondcontent">second</div>
    </div>
</div>

左侧的菜单应该是修复内容,正确的内容应该是可更改的.

我做了一个草图:

提前致谢

Answer 1

重新安排代码,以便(i)主要内容出现在HTML源顺序的侧边栏之前(ii)添加清除div(iii)更改href菜单链接的属性:

<div id="page">
    <div id="maincontent">
        <div id="firstcontent">firstcontent</div>
        <div id="secondcontent">secondcontent</div>
    </div>
    <div id="menuleftcontent">
        <ul id="menu">
            <li><a href="#firstcontent">first</a></li>
            <li><a href="#secondcontent">second</a></li>
        </ul>
    </div>
    <div id="clearingdiv"></div>
</div>

然后使用以下CSS:

#page {
    margin-left: 200px;
}
#maincontent {
    float: right;
    width: 100%;
    background-color: #F0F0F0;
}
#menuleftcontent{
    float: left;
    width: 200px;
    margin-left: -200px;
    background-color: #CCCCCC;
}
#clearingdiv {
    clear: both;
}

对于问题的模糊部分,您需要使用JavaScript来显示/隐藏div.虽然可以使用vanilla JavaScript,但jQuery库使它更容易:

$(function () {
    $("#maincontent > div:gt(0)").hide();
    $("#menu a").on("click", function (e) {
        var href = $(this).attr("href");
        $("#maincontent > " + href).show();
        $("#maincontent > :not(" + href + ")").hide();
    });
});

在这里演示