1

希望能够将多个不同的页面放入一个 html 页面中，类似于下面发布在这篇文章中的代码： 一个 HTML 文件中的多个不同页面

但是，我想在页面上方有一个固定的标题以允许导航。
例如，标题有 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>
4

1 回答 1

5

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

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

这是在 JSFiddle http://jsfiddle.net/H4dbJ/但这里的代码直接：

// show the given page, hide the rest
function show(elementID) {
  // find the requested page and alert if it's not found
  const ele = document.getElementById(elementID);
  if (!ele) {
    alert("no such element");
    return;
  }

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

  // then show the requested page
  ele.style.display = 'block';
}
span {
  text-decoration:underline;
  color:blue;
  cursor:pointer;
}
<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>

进一步的开发思路包括：使用 Page1 Page2...PageN 页码作为变量的下一个/上一个按钮，循环遍历所有页面并显示最后一个页面。或显示第一个。之后，下一个/上一个按钮在变量中跟踪当前页面，然后转到下一个。

于 2013-10-11T06:28:48.377 回答