js 实现内容分页显示 博客分类： javascript CSSHTML

<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='#' onclick='javascript:_$prePage("+_curPage+")'>上一页</a>";
  for (var i=0;i<_contentArray.length;i++) {
   _s+=('<a href="#" onclick="javascript:_$Pages('+i+');" onfocus="this.blur()" title="Page&nbsp;'+(i+1)+'" id="soojs_'+(i+1)

+'">'+"&nbsp;"+(i+1)+"&nbsp;"+'</a>&nbsp;&nbsp;&nbsp;&nbsp;');
  }
  _s+="<a href='#' onclick='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