时间戳

首页 > 解决方案 > HTML 同一文件上的多个页面

html - HTML 同一文件上的多个页面

问题描述

我设法在同一个文件上做了 2 页，但是当我用同样的技术尝试 3 页时它不起作用。

<script>
    function show(shown, hidden, hidden) {
      document.getElementById(shown).style.display='block';
      document.getElementById(hidden).style.display='none';
      document.getElementById(hidden).style.display='none';
    }
</script>

<a href="#" onclick="show('Page2','Page1','Page3');" class="bminappi">BMI-laskuri</a>

现在此按钮在同一页面上显示第 1 页和第 2 页的内容，而不是第 3 页。我希望它只显示第 2 页。

页面是这样的 div：（除了 page1 没有显示：无）

<div id="Page2" style="display:none">

标签： html

解决方案

实际上我昨天刚刚创建了一个这样的网站，并且我过去创建了很多（其中最简单的就是这个：http: //oops-studio.com/twinsremasteredobstaclecreator/helppage/）

我通常的做法是让每个页面都成为一个 div，它是页面上所有内容的巨大容器，然后给它一个类之类的page东西。

然后你可以创建一个类似的函数changePageTo(index)并让该循环遍历每个页面并设置它style.display = "none";然后获取目标页面和style.display = "block";

一个例子是这样的：

let pages = document.getElementsByClassName("page");

function changePageTo(index){
    for(let i = 0;i < pages.length;i++){
        pages[i].style.display = "none";
    }
    pages[index].style.display = "block";
}

如果您愿意，您还可以使用指定的名称而不是索引来显示页面。我通常会这样做是这样的：

let pages = document.getElementsByClassName("page");
let pageNames = ["Cookies","Another page","The last page"];// One name per page element

function changePageTo(name){
    let index = pageNames.indexOf(name);
    if(index === -1){// If the page doesn't exist
        // Do whatever you want in here
        return;
    }
    for(let i = 0;i < pages.length;i++){
        pages[i].style.display = "none";
    }
    pages[index].style.display = "block";
}

希望这能回答你的问题！

这是一个工作示例：

let pages = document.getElementsByClassName("page");

function changePageTo(index){
    for(let i = 0;i < pages.length;i++){
        pages[i].style.display = "none";
    }
    pages[index].style.display = "block";
}

changePageTo(0);
<div class = "page">
  <h1>This is page one. It's titled "Cookies"</h1>
</div>
<div class = "page">
  <h1>This is page two. It's titled "Another page"</h1>
</div>
<div class = "page">
  <h1>This is page three. It's titled "The last page"</h1>
</div>
<button onclick = "changePageTo(0)">Show page 1</button>
<button onclick = "changePageTo(1)">Show page 2</button>
<button onclick = "changePageTo(2)">Show page 3</button>

推荐阅读