使用单个 HTML 文档添加多个页面答案

【问题标题】：Adding multiple pages with a single HTML document使用单个 HTML 文档添加多个页面
【发布时间】：2015-03-06 02:24:25
【问题描述】：

我正在尝试用一个 HTML 文档实现一个多页网站。

当用户点击我侧边栏中的某个链接时，我想显示“家”、“关于”、“项目”和“联系人”。

我写了以下代码：

index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/main.css">
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script>
        function diff(A, B) {
            return A.filter(function (a) {
                return B.indexOf(a) == -1;
            });
        }

        function show(shown) {
            var all = ['home', 'about', 'projects', 'contact'];
            var hide_these = diff(all, shown);
            var hidden;
            document.getElementById(shown).style.display='block';
            for(hidden in hide_these)
                document.getElementById(hidden).style.display='none';
            return false;
        }
        </script>
    </head>
    <body>
       <div id="home">
            <div class="header">
                <div class="menu-btn"></div>
                <h1>
                    Hello, World!
                </h1>
            </div>
            <div class="sidebar">
                <li><a href="#" onclick="return show('home');">Home</a></li>
                <li><a href="#" onclick="return show('about');">About</a></li>
                <li><a href="#" onclick="return show('projects');">Projects</a></li>
                <li><a href="#" onclick="return show('contact');">Contact</a></li>
            </div>
            <div class="content">
                <p><br><br><br><br>Home</p>
            </div>
            <div class="footer">
            </div>
        </div>

        <div id="about" style="display:none">
            <div class="header">
                <div class="menu-btn"></div>
                <h1>
                    Hello, World!
                </h1>
            </div>
            <div class="sidebar">
                <li><a href="#" onclick="return show('home');">Home</a></li>
                <li><a href="#" onclick="return show('about');">About</a></li>
                <li><a href="#" onclick="return show('projects');">Projects</a></li>
                <li><a href="#" onclick="return show('contact');">Contact</a></li>
            </div>
            <div class="content">
                <p><br><br><br><br>About</p>
            </div>
            <div class="footer">
            </div>
        </div>

        <div id="projects" style="display:none">
            <div class="header">
                <div class="menu-btn"></div>
                <h1>
                    Hello, World!
                </h1>
            </div>
            <div class="sidebar">
                <li><a href="#" onclick="return show('home');">Home</a></li>
                <li><a href="#" onclick="return show('about');">About</a></li>
                <li><a href="#" onclick="return show('projects');">Projects</a></li>
                <li><a href="#" onclick="return show('contact');">Contact</a></li>
            </div>
            <div class="content">
                <p><br><br><br><br>Projects</p>
            </div>
            <div class="footer">
            </div>
        </div>

        <div id="contact" style="display:none">
            <div class="header">
                <div class="menu-btn"></div>
                <h1>
                    Hello, World!
                </h1>
            </div>
            <div class="sidebar">
                <li><a href="#" onclick="return show('home');">Home</a></li>
                <li><a href="#" onclick="return show('about');">About</a></li>
                <li><a href="#" onclick="return show('projects');">Projects</a></li>
                <li><a href="#" onclick="return show('contact');">Contact</a></li>
            </div>
            <div class="content">
                <p><br><br><br><br>Contact</p>
            </div>
            <div class="footer">
            </div>
        </div>
    </body>
</html>

css/main.css

    html,body {
        padding: 0;
        margin: 0;
        font-family: arial;
    }

    html, body, #home{
        width: 100%;
        height:100%;
    }
    a { 
        color: black;
    }

    a:visited { 
        text-decoration: none; 
        color: black; 
    }


    #home{
        min-height:100%;
        position:relative;
    }

    body .sidebar {
        display:block;
    }

    body.loaded .sidebar {
        display:none;
    }

    .header {
        background-color: black;
        height: 80px;
        width: 100%;
        font-family: cursive;
        text-align: center;
        line-height: 2;
        color: white;
        display:flex; align-items: center; 
        z-index: 1;
        position:relative;
    }

    .menu-btn {
        background-image: url("../images/menu.png");
        height: 48px;
        width: 44px;
        margin-left:50px;
    }

    .header h1 {
        opacity: 0;
        width:100%;
        margin:0;
        padding:0;
    }

    .sidebar {
        position: absolute;
        width: 200px;
        top: 80px;
        bottom: 0;
        padding-top: 10px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
        filter: alpha(opacity=50);  /* IE 5-7 */
        -moz-opacity: 0.5;          /* Netscape */
        -khtml-opacity: 0.5;        /* Safari 1.x */
        opacity: 0.5;               /* Good browsers */
    }

    .sidebar li {
        color: black;
        list-style-type: none;
        margin-top: 10px;
        width: 100%;

    }

    .sidebar li a {
        text-decoration: none;
        margin-left: 30px;
        background-color: #9da1a4;
        width: 100px; 
        padding: 8px;
        border: 1px solid silver; 
        border-radius: 5px; 
        display: block;
    }

    .sidebar li a:hover {
        background-color: #ebebeb;
    }

    .content {
        margin-top: -80px; /* Header height */
        background-image:url("../images/arbor.jpeg");
        background-size: cover;
        min-height: 100%;
        min-width: 100%;
    }

    .content h1 {
        color: black;
    }

    .footer {
        width:100%;
        height:30px;
        text-align: center;
        color: white;
        background-color: black;
        padding-top: 10px;
        bottom:0;
        left:0;
        position:absolute;
    }

    .footer a img {
        position: relative;
        top: -5px;
    }

但是当我点击一个选项时，它会出现一个预期的问题：应该隐藏的“页面”没有被隐藏，只显示了请求页面的一部分。

找到的 jsfiddle here 显示了我的问题。

为什么这不起作用？头部的 javascript 是为了找到所有页面和请求的页面之间的差异，显示请求的页面并隐藏其余页面。

提前致谢， erip

【问题讨论】：

你应该使用一个框架来为这类事情创建单页网络应用程序，而不是尝试手动编程。
我正在开发一个 github pages 网站，据我所知，它不允许使用框架。

标签： javascript jquery html css

【解决方案1】：

见fiddle

替换

for (hidden in hide_these) {
            document.getElementById(hidden).style.display = 'none';
        }

与

for (hidden in hide_these) {
            document.getElementById(hide_these[hidden]).style.display = 'none';
        }

您的代码的问题是 document.getElementById() 返回 null 因为变量 hidden 的值实际上是 0、1、2 等。

您实际上必须从数组 hide_these 中获取 ID

更新

在你的 CSS 中添加这个

背景图片的混乱是因为您缺少以下给定的 css。添加它们以解决问题..

#about, #projects, #contact {
            width: 100%;
            height:100%;
        }

【讨论】：

这行得通，但它弄乱了我的背景图像。任何线索为什么？
非常有帮助。非常感谢！
很高兴帮助..快乐编码.. :)