怎么设置显示分页的当前页

2016-02-22    编辑:kp12345     点击(

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单封装 分页效果</title>
<style type="text/css" media="all">
/* <![CDATA[ */
body{margin:50px}
ul{border-top:solid 1px #ddd; margin:0; padding:0 0 0 20px; list-style:none; background:#f4f4f4}
ul li{float:left}
ul li a{display:block; width:30px; height:30px;  border:solid 1px #f4f4f4; text-align:center; line-height:30px}
ul li a.on{position:relative; margin:-1px 0 0; border:solid 1px #ddd; border-top-color:#fff; color:#f00; background:#fff}
.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block}
/* ]]> */
</style>
</head>
<body>
<ul id="test" class="clear">
<li><a href="javascript:;" class="on">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
<li><a href="javascript:;">6</a></li>
<li><a href="javascript:;">7</a></li>
<li><a href="javascript:;">8</a></li>
<li><a href="javascript:;">9</a></li>
</ul>
<script type="text/javascript">
// <![CDTAT[
// by MacJi
function f(c){
 this.container = document.getElementById(c);
 this.li = this.container.getElementsByTagName('a');
 var _this = this;
 
 this.init = function (){
  for(var i = 0; i < _this.li.length; i++)_this.li[i].onclick = function(){_this.setOn(this);return this.blur()};
 }
 
 this.setOn = function(o){
  for(var i = 0; i < _this.li.length; i++) _this.li[i].className = '';
  o.className = 'on';
 }
}
var page = new f('test');
page.init();
// ]]>
</script>
</body>
</html>