js 实现内容分页显示

<script defer="defer" language="javascript" type="text/javascript">
<!--
var _offset = 0;
function _$id(_obj) {
return document.getElementById(_obj);
}
function _$Pages(_i) {
_curPage=_i;
_$id("Content").innerHTML=_contentArray[_i];
for (var i=0;i<_contentArray.length;i++)
{
if (i==_i)
_$id("soojs_"+(_i+1)).style.backgroundColor="#ff9900";
else
_$id("soojs_"+(i+1)).style.backgroundColor="";
}
}

var _contentArray;
var _curPage=0;
var _totalPage;

function _$prePage(){
_curPage--;
if(_curPage>=0){
_$Pages(parseInt(_curPage));
}
else{
_curPage=0;
_$Pages(parseInt(_curPage));
}
}

function _$nextPage(){
_curPage++;
if(_curPage<_totalPage){
_$Pages(parseInt(_curPage));
}
else{
_curPage=_totalPage-1;
}
}
$(function() {
var _s='';
var neirong=_$id("Content").innerHTML;
_contentArray=neirong.split("#page#");
if(_contentArray.length>1){
_totalPage=_contentArray.length;
_$id("Content").innerHTML=neirong.replace("#page#"," ");
_s+="<a href='#' οnclick='javascript:_$prePage("+_curPage+")'>上一页</a>";
for (var i=0;i<_contentArray.length;i++) {
_s+=('<a href="#" οnclick="javascript:_$Pages('+i+');" οnfοcus="this.blur()" title="Page '+(i+1)+'" id="soojs_'+(i+1)

+'">'+" "+(i+1)+" "+'</a>    ');
}
_s+="<a href='#' οnclick='javascript:_$nextPage("+_curPage+")'>下一页</a>";
_$id("Pages").innerHTML=_s;
_$Pages(0);
}

}
);
//-->
</script>

<style type="text/css">
#Content {
margin: 1px 1px 0px 1px;
_margin: 1px 1px 0px 1px; /* CSS Hack For IE6 */
text-align: left;
}
#Pages {
width: 400px;
height: 20px;
margin: 0px;
text-align: right;
}
#Pages a{
display:inline;
}
#Pages a:link{color:#000000}
#Pages a:hover{color:#FF0000}
#Pages a:active{color:#3300FF}
</style>

html:
<div id="Content">
<div id="Pages"></div>
</div>

--------------
使用很简单如果内容很长在分页的地方都添加#page#就ok
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值