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

Adding multiple pages with a single HTML document

本文关键字：添加文档单个 HTML 更新时间：2023-09-26

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

当用户点击我侧边栏中的某个链接时，我想显示"主页"、"关于"、"项目"answers"联系人"。

我写了以下代码：

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显示了我的问题。

为什么不起作用？头中的javascript旨在查找所有页面和请求页面之间的差异，显示请求页面并隐藏其余页面

提前感谢，erip

看小提琴

更换

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，因为隐藏变量的值实际上是0,1,2等。

实际上你必须从数组中获取id hide_these

更新

将此添加到您的CSS 中

背景图像的混乱是因为你错过了下面给定的css。添加它们以解决问题。。

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