欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-04 18:42:12
...
<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
相关标签: CSS HTML