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

html-css012

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>

类似#home这种链接是在一个页面内的跳转,跳转到的位置我们称之为“锚点”。下面的代码存到index.html即可查看效果<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div style="position: fixedtop: 0left: 0background-color: #fff"><a href="#home">首页</a><a href="#page2">page2</a><a href="#page3">page3</a></div><div style="height: 800pxborder: 1px solid #dddpadding-top: 35px"><a id="home"></a><br><br>这里是首页部分</div><div style="height: 800pxborder: 1px solid #dddpadding-top: 35px"><a id="page2"></a><br><br>这里是page2部分</div><div style="height: 1000pxborder: 1px solid #dddpadding-top: 35px"><a id="page3"></a><br><br>这里是page3部分</div></body></html>

可使用占位符从数据集中的字段导入HTML以在分页报表中使用。

可使用占位符从数据集中的字段导入HTML以在分页报表中使用。默认情况下,占位符表示纯文本,因此需要将占位符的标记类型改为HTML。

分页是指在web页面有大量数据需要显示时,当一页的内容太多不利于阅读和不利于数据提取的情况下,可以分为多页进行显示。