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

HTML分页,显示分页页面内容,第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=1i<=3i++) {

if (page==i){

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

} else {

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

}

}

}

</script>

通常情况下这是css中的解决方法。

给你个测试页:

(在此之前建议楼主下载苏沈小雨的CSS样式表,如果楼主打算长期做网页的话)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Untitled Page</title>

<style type="text/css">

/*说明:color:blue表示蓝色。*/

a{margin:0 5pxtext-decoration:none}

a:link{color:gray}/*链接*/

a:visited{color:gray}/*己经访问过的链接*/

a:hover{color:blue}/*当鼠标停在链接上时的样式*/

a:active{color:blue}/*当链接正在被点击时的样式*/

</style>

</head>

<body>

<a href="index.htm" class="normal">链接1</a><a href="index.htm" class="normal">链接1</a><a href="index.htm" class="normal">链接1</a><a href="index.htm" class="normal">链接1</a><a href="index.htm" class="normal">链接1</a><a href="index.htm" class="normal">链接1</a>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7143639.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-02
下一篇 2023-04-02

发表评论

登录后才能评论

评论列表(0条)

保存