HTML在同一文件上的多个页面

Question

我设法在同一文件上做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页。

页面是这样划分的(除了page1没有display:none)

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

Answer 1

我认为问题是你在函数中有两个同名的参数，这意味着当你引用它们时，它只会使用它的第一个实例。

如果你稍微改变了名字，就像我下面这样，我认为你应该排序。

function show(shown, hidden1, hidden2) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden1).style.display='none';
document.getElementById(hidden2).style.display='none';
}

Answer 2

我实际上昨天才创建了一个这样的网站，并且我在过去创建了许多(其中最简单的是这个: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>