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=1;i<=3;i++) {

if (page==i){

documentgetElementById("page"+page)styledisplay="block";

} else {

documentgetElementById("page"+page)styledisplay="none";

}

}

}

</script>

如果你用虚拟打印机打印,文档就会按虚拟打印机里设置的页面尺寸自动分页。
1、如果你的浏览器有虚拟的PDF打印机的,请你PDF虚拟打印机打印你要输出的内容,即可得到你要的PDF文档。
2、如果用其它浏览器,没有虚拟的PDF打印机的,请你安装Adobe Acrobat XI Pro软件,在WORD中用Adobe PDF打印机打印你要输出的内容,即可得到你要的PDF文档。

设置百分之百样式  class 添加 col-lg-12

div的宽度是使用百分比来定的 上限为12

lg为大屏设备(min-width:1200px) md为平板 ms为  中屏设备(min-width:992px),sm为小屏设备(min-width:768px),xs为超小型设备(max-width:768px)

设置12分之一 使用 col-lg-1

额。。。。做分页应该是直接从数据库那里拿数据的时候做的吧,你是全写静态了?反正我做的是数据库sql语句读数据库的时候读出多少到多少的,也就是比如第二页就是输出第21-40条这种,所以没这个问题,只要传一个请求的页码和搜索的条件就好,然后如果读不出数据就显示另一个页码,比如您查找的东西没找到啥米的。。。。
你这个的话,要不就是先判断下是否存在那个文件,如果不存在就跳转到目录。。。。
你看下这个:>通常情况下这是css中的解决方法。
给你个测试页:
(在此之前建议楼主下载苏沈小雨的CSS样式表,如果楼主打算长期做网页的话)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">这个主要得通过JAVASCRIPT来实现了你看到过切换的效果吧可以用那个代码来代替的只不过容器中装的不是,而是表格而已
还有我估计你想实现的是通过AJAX局部刷新来实现的貌似静态的分页不过这是跟服务交互的前者是没有交互的


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

原文地址: http://outofmemory.cn/yw/13373093.html

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

发表评论

登录后才能评论

评论列表(0条)

保存