一般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>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)