Question

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

我想显示＆＃39; home＆＃39;，＆＃39; about＆＃39;，＆＃39; projects＆＃39;和＆＃39; contact＆＃39;当用户点击侧边栏中的某个链接时。

我写了以下代码：

的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;
    }

但是当我点击一个选项时，它会出现一个预期的问题：＆＃39;页面＆＃39;应隐藏的内容不会被隐藏，只显示所请求页面的一部分。

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

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

提前致谢， erip

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

你实际上必须从数组hide_these

获取ID

<强>更新

在CSS中添加

背景图片的混乱是因为你错过了下面给出的css。添加它们来解决问题..

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

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

1 个答案:

请参阅fiddle