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

Posted 2023-02-27

<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>
目前情况是：只点击第三页才显示内容，点击第一页和第二页不显示
需求：
当点击第一页显示第一页内容，第二页和第三页内容屏蔽
当点击第二页显示第二页内容，第一页和第三页内容屏蔽
当点击第三页显示第三页内容，第一页和第二页内容屏蔽
最好能修改好发源码，小白一个谢谢哦！

参考技术A

一般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>

追问

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

参考技术B 把
document.getElementById("page"+page).style.display="none";

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