求大神看看 怎样才能翻页啊 每页2个 分3页啊
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery手机网站数据列表分页样式代码 - 素材目录99447com</title>
<style type="text/css">
//分页的显示与隐藏
$("#xifenye").click(function(a){
$("#uljia").empty();
$("#xab").toggle();
//显示出的一共多少页
var uljia=$("#uljia");
var page=parseInt($("#xiye").html());//获取当前的页数
var pages=parseInt($("#mo").html());//获取当前的总页数
for(var i=1;i<=pages;i++)
{
var H="<li onclick='fl("+i+","+pages+")'>"+i+"</li>";//添加一共多少页和点击事件
uljia.append(H);
}
scrolltop(page);
})
//点击分页显示的方法
function fl(p1,p2){
//var p=p1;
$("#xiye").empty();
$("#xiye").html(p1);//给显示的页数赋值
}
//分页的的上一页和下一页
function topclick(){
var v=document.getElementById("xiye");
var num=v.innerHTML;
if(num>1)
{
num--;
v.innerHTML=num;
var hei=25*num-25;
$("#xab").scrollTop(hei);
}
}
function downclick(){
var pages=parseInt($("#mo").html());//获取当前的总页数
var v=$("#xiye");
var num=parseInt(v.html());
if(num < pages){
num = ++num;
v.html(num);
scrolltop(num);
}
}
//分页的的首页和未页
$("#first").bind("click",function(){
var v=document.getElementById("xiye");
v.innerHTML=1;
scrolltop(v.innerHTML);
})
$("#last").bind("click",function(){
var v=document.getElementById("xiye");
var l=document.getElementById("mo");
v.innerHTML=l.innerHTML;
scrolltop(v.innerHTML);
})
//滚动条
function scrolltop(top){
var hei=25*top-25;
$("#xab").scrollTop(hei);
}
</style>
</head>
<body>
<div id="conten">
<div class="mingyi">
<img class="img" src="images/llk.png" />
<p style="color:#0033FF; font-size:13px; font-weight:bold; margin-left:152px; margin-top:-144px;">廖乐宽 奥林院长/主任医师</p>
<div style="margin-left:150px;border:1px solid #FF0000;">擅长痔、瘘、脱肛、肛肠肿瘤、内外痔、混合痔、复杂性肛瘘、多间隙肛周脓肿等肛肠疾病的治疗,具有高深造诣。</div>
<a><img src="images/zx.jpg" style="margin-left: 153px;margin-top: 9px;" /></a>
<a><img src="images/yy.jpg" style="margin-left: 230px;margin-top: -21px;" /></a>
</div>
<hr style="border-top:1px solid #CCCCCC; margin-top:30px;" />
<div class="mingyi">
<img class="img" src="images/lch.png" />
<p style="color:#0033FF; font-size:13px; font-weight:bold; margin-left:152px; margin-top:-144px;">李春洪 肛肠科主任</p>
<div style="margin-left:150px;border:1px solid #FF0000;">精通运用PPH、COOK、HCPT、DG-HAL等先进微创技术治疗痔疮、肛瘘、肛裂、肛周脓肿等病症。</div>
<a><img src="images/zx.jpg" style="margin-left: 153px;margin-top: 9px;" /></a>
<a><img src="images/yy.jpg" style="margin-left: 230px;margin-top: -21px;" /></a>
</div>
<hr style="border-top:1px solid #CCCCCC; margin-top:30px;" />
<div class="mingyi">
<img class="img" src="images/wsb.png" />
<p style="color:#0033FF; font-size:13px; font-weight:bold; margin-left:152px; margin-top:-144px;">吴仕碧 胃肠主任医师/女子诊疗中心主任</p>
<div style="margin-left:150px;border:1px solid #FF0000;">对胃肠消化内科、胃炎、慢性胃炎、胃溃疡、胃炎有独到的诊疗技术。</div>
<a><img src="images/zx.jpg" style="margin-left: 153px;margin-top: 9px;" /></a>
<a><img src="images/yy.jpg" style="margin-left: 230px;margin-top: -21px;" /></a>
</div>
<hr style="border-top:1px solid #CCCCCC; margin-top:30px;" />
<div class="mingyi">
<img class="img" src="images/yf.png" />
<p style="color:#0033FF; font-size:13px; font-weight:bold; margin-left:152px; margin-top:-144px;">杨繁 肛肠科主治医师</p>
<div style="margin-left:150px;border:1px solid #FF0000;">擅长重度痔疮、高位复杂性肛瘘、顽固性肛裂、肛周湿疣、马蹄形脓肿、直肠脱垂等肛肠疾病,临床经验丰富。</div>
<a><img src="images/zx.jpg" style="margin-left: 153px;margin-top: 9px;" /></a>
<a><img src="images/yy.jpg" style="margin-left: 230px;margin-top: -21px;" /></a>
</div>
<hr style="border-top:1px solid #CCCCCC; margin-top:30px;" />
<div class="mingyi">
<img class="img" src="images/yn.png" />
<p style="color:#0033FF; font-size:13px; font-weight:bold; margin-left:152px; margin-top:-144px;">叶宁 肛肠科主任</p>
<div style="margin-left:150px;border:1px solid #FF0000;">擅长诊治重度痔疮、浓性肛瘘、直肠黏膜脱垂、息肉、肛裂等,手法独特。</div>
<a><img src="images/zx.jpg" style="margin-left: 153px;margin-top: 9px;" /></a>
<a><img src="images/yy.jpg" style="margin-left: 230px;margin-top: -21px;" /></a>
</div>
<hr style="border-top:1px solid #CCCCCC; margin-top:30px;" />
<div class="wrap" >
<div class="fenye">
<ul>
<li id="first">首页</li>
<li id="top" onclick="topclick()">上一页</li>
<li class="xifenye" id="xifenye">
<a id="xiye">1</a>/<a id="mo">3</a>
<div class="xab" id="xab" style="display:none">
<ul id="uljia">
</ul>
</div>
</li>
<li id="down" onclick="downclick()">下一页</a></li>
<li id="last">末页</li>
</ul>
</div>
</div>
</div>
</body>
</html>
弄了好半天 求解决
相关推荐
前端开发组件示例源码_f1b6a91d详解
前端开发组件示例源码_f1b6a91d,内容包含源码/脚本与使用说明文档,结构清晰、注释完整,适合学习参考与二次开发,下载解压即可查看。
前端开发基于history.js的HTML5与HTML4浏览器兼容方案:单页应用无刷新历史状态管理技术实现-Gjl4Gf1792158475
内容概要:本文系统介绍了如何利用history.js实现单页应用(SPA)在HTML5c与HTML4浏览器间s草错发的无缝历史状态管理。通过封装原生History API并在不支持的浏览器中自动降级为哈希路由,history.js解决了因浏览器兼容性导致的后退按钮失效、URL混乱等问题。文章详细讲解了其核心机制,包括状态对象管理、自动模式切换(HTML5 pushState vs HTML4 哈希)、状态数据持久化以及针,对Safari、IE等浏\览器的兼容性修复方案,并提供了从入门到实战的完整示例,涵盖初始化、事,件监听、页面加载及性能优化技巧。;Gjl4Gf1792158475 www.gblp.net www.gsctlq.com gezhixq.cn www.greendalian.com wap.gxqnm.com
前端开发基于history.js的HTML5与HTML4浏览器兼容方案:单页应用无刷新历史状态管理技术实现-5Z6jeSqI1792158476
内容概要:本文系统介绍了如何利用history.js实现单页应用(SPA)在HTML5c与HTML4浏览器间s草错发的无缝历史状态管理。通过封装原生History API并在不支持的浏览器中自动降级为哈希路由,history.js解决了因浏览器兼容性导致的后退按钮失效、URL混乱等问题。文章详细讲解了其核心机制,包括状态对象管理、自动模式切换(HTML5 pushState vs HTML4 哈希)、状态数据持久化以及针,对Safari、IE等浏\览器的兼容性修复方案,并提供了从入门到实战的完整示例,涵盖初始化、事,件监听、页面加载及性能优化技巧。;5Z6jeSqI1792158476 sdhmgggw168.com www.shangliangwangye.com www.sdbing.net migu.blsxex.abxlbz.sc.cn www.safespeed.net.cn
高校如何通过科技报告服务提升技术转移转化效率?.docx
科易网基于40亿+科创知识图谱数据库,深度探索AI技术在技术转移、成果转化、技术经纪、知识产权、产业创新、科技招商等垂直领域的多样化应用场景,研究科技创新领域的AI+数智化解决方案,推动科技创新与产业创新智能化发展。
科技服务机构如何提升服务大企业的技术诊断能力?.docx
科技服务机构如何提升服务大企业的技术诊断能力?


