Question

希望能够将多个不同的页面放入一个html页面，类似于此帖子中发布的下面显示的代码： Multiple distinct pages in one HTML file

但是，我想在页面上方有一个固定的标题以允许导航例如，标题有4个链接（Link1，Link2等），用户可以从中选择。如果用户在哪里点击“Link2”，那么只有Link2会出现在下方，其他页面将保持隐藏状态。

让我知道，谢谢！

<html>
    <head>
        <script>
            function show(shown, hidden) {
                document.getElementById(shown).style.display='block';
                document.getElementById(hidden).style.display='none';
                return false;
            }
        </script>
    </head>
    <body>
        <div id="Page1">
            Content of page 1
            <a href="#" onclick="return show('Page2','Page1');">Show page 2</a>
        </div>

        <div id="Page2" style="display:none">
            Content of page 2
            <a href="#" onclick="return show('Page1','Page2');">Show page 1</a>
        </div>
    </body>
</html>

Answer 1

您可以只使用ID，但如果您获得许多页面开始变得有点单调乏味。我建议使用一个类进行隐藏。此外，如果您希望页面有一个公共标题，您只需要从HTML元素构建它，然后在那里显示页面链接，而不是在页面内容中。

我提出了另一个建议，我在所有页面DIV中添加了“页面”类。然后你可以做的是用“page”类隐藏所有DIV并用ID显示你想要的那个。这也不是一个非常灵活的系统，你不能轻易做到动态数量的页面或动态的第一页，但它是一个开始的地方。这是我的例子：

这是在JSFiddle http://jsfiddle.net/H4dbJ/中，但这里是代码：

<html>
    <head>
        <style type='text/css'>
            span {
                text-decoration:underline;
                color:blue;
                cursor:pointer;
            }
        </style>
        <script>
            // show the given page, hide the rest
            function show(elementID) {
                // try to find the requested page and alert if it's not found
                var ele = document.getElementById(elementID);
                if (!ele) {
                    alert("no such element");
                    return;
                }

                // get all pages, loop through them and hide them
                var pages = document.getElementsByClassName('page');
                for(var i = 0; i < pages.length; i++) {
                    pages[i].style.display = 'none';
                }

                // then show the requested page
                ele.style.display = 'block';
            }
        </script>
    </head>
    <body>
      <p>
        Show page 
            <span onclick="show('Page1');">1</span>, 
            <span onclick="show('Page2');">2</span>, 
            <span onclick="show('Page3');">3</span>.
        </p>

    <div id="Page1" class="page" style="">
        Content of page 1
    </div>
    <div id="Page2" class="page" style="display:none">
        Content of page 2
    </div>
    <div id="Page3" class="page" style="display:none">
        Content of page 3
    </div>

    </body>
</html>

进一步的开发思路包括：使用Page1 Page2 ... PageN页面编号作为变量的next / prev按钮，遍历显示最后一页的所有页面。或者显示第一个。之后，一个Next / Previous按钮跟踪变量中的当前页面，然后转到下一个。

一个html页面中有多个页面

1 个答案: