Question

HTML分页，显示分页页面内容

<div id="page1" style="display:none;">这是第1页的内容</div><div id="page2" style="display:none;">这是第2页的内容</div><div id="page3" style="display:none;">这是第3页的内容</div><a href="javascript:showpage(1);">第1页</a><a href="javascript:showpage(2);">第2页</a><a href="javascript:showpage(3);">第3页</a><script>function showpage(page){ for(var i=0;i<=3;i++) { if (page==i){ document.getElementById("page"+page).style.display="block"; } else { document.getElementById("page"+page).style.display="none"; } }}</script>目前情况是：只点击第三页才显示内容，点击第一页和第二页不显示需求：当点击第一页显示第一页内容，第二页和第三页内容屏蔽当点击第二页显示第二页内容，第一页和第三页内容屏蔽当点击第三页显示第三页内容，第一页和第二页内容屏蔽最好能修改好发源码，小白一个谢谢哦！
<div id="page1" style="display:none;">这是第1页的内容</div>
<div id="page2" style="display:none;">这是第2页的内容</div>
<div id="page3" style="display:none;">这是第3页的内容</div>
<a href="javascript:showpage(1);">第1页</a>
<a href="javascript:showpage(2);">第2页</a>
<a href="javascript:showpage(3);">第3页</a>
<script>
function showpage(page){
for(var i=0;i<=3;i++) {
if (page==i){
document.getElementById("page"+page).style.display="block";
} else {
document.getElementById("page"+page).style.display="none";
}
}
}
</script>
目前情况是：只点击第三页才显示内容，点击第一页和第二页不显示
需求：
当点击第一页显示第一页内容，第二页和第三页内容屏蔽
当点击第二页显示第二页内容，第一页和第三页内容屏蔽
当点击第三页显示第三页内容，第一页和第二页内容屏蔽
最好能修改好发源码，小白一个谢谢哦！

Answer 1

• 一般html网页，可以采用div的css属性控制显示和隐藏来实现分页的目的。

  display:block; 这个css属性可以让div显示出来；

  display:none; 这个css属性可以让div隐藏起来；

  例如：

  <div id="page1" style="display:block;">这是第1页的内容</div>

  <div id="page2" style="display:none;">这是第2页的内容</div>

  <div id="page3" style="display:none;">这是第3页的内容</div>

• 然后增加3个按钮，分别是第1页，第2页，第3页，每个按钮有点击事情。

  例如：

  <a href="javascript:showpage(1);">第1页</a>

  <a href="javascript:showpage(2);">第2页</a>

  <a href="javascript:showpage(3);">第3页</a>

• 4

  然后通过javascript点击事情来修改div的css属性display的值，就可以达到切换页面的目的了。

  例如：

  <script>

  function showpage(page){

  for(var i=1;i<=3;i++) {

  if (page==i){

  document.getElementById("page"+page).style.display="block";

  } else {

  document.getElementById("page"+page).style.display="none";

  }

  }

  }

  </script>

追问

我就是用这个百度教程，失败了，哎呀

Answer 2

把
document.getElementById("page"+page).style.display="none";

改为
document.getElementById("page"+i).style.display="none";