function getParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i")
var r = window.location.search.substr(1).match(reg)
if (r != null)
return unescape(r[2])
return null
}
var page = getParam('page')
<script language="javascript">var obj,j
var page=0
var nowPage=0//当前页
var listNum=6//每页显示<ul>数
var PagesLen//总页数
var PageNum=4//分页链接接数(5个)
onload=function(){
obj=document.getElementById("mydiv").getElementsByTagName("li")
j=obj.length
PagesLen=Math.ceil(j/listNum)
upPage(0)
}
function upPage(p){
nowPage=p
//内容变换
for (var i=0i<ji++){
obj[i].style.display="none"
}
for (var i=p*listNumi<(p+1)*listNumi++){
if(obj[i])obj[i].style.display="block"
}
//分页链接变换
sliS='<a href="###" onclick="upPage(0)">首页</a> '
if(nowPage>0) //***如果不是第一页，则显示上一页
sliS+='<a href="###" onclick="upPage('+(nowPage-1)+')">上一页</a>'
var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2)
var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1
var sliC="",startPage,endPage
if (PageNum>=PagesLen) {startPage=0endPage=PagesLen-1}
else if (nowPage<PageNum_2){startPage=0endPage=PagesLen-1>PageNum?PageNum:PagesLen-1}//首页
else {startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1var t=startPage+PageNumendPage=t>PagesLen?PagesLen-1:t}
for (var i=startPagei<=endPagei++){
if (i==nowPage)sliC+='<a href="###" style="color:redfont-weight:700" onclick="upPage('+i+')">'+(i+1)+'</a> '
else sliC+='<a href="###" onclick="upPage('+i+')">'+(i+1)+'</a> '
}
if(nowPage<(PagesLen-1)) //****如果不是最后一页，显示下一页
sliS+='<a href="###" onclick="upPage('+(nowPage+1)+')">下一页</a>'
sliE=' <a href="###" onclick="upPage('+(PagesLen-1)+')">尾页</a> '
sliE2=nowPage+1+"/"+PagesLen+"页"+" 共"+j+"条"
document.getElementById("changpage").innerHTML=sliS+sliC+sliE+sliE2
}
主要思路：就是点击当前页时，它自己显示，其它的都隐藏；
下面是简单的代码实现：
<style>input.active {background:yellow}
div {width:200px height:200px border:1px solid red display:none}
div.active {display:block}
</style>
<script>
window.onload=function(){
var aBtn = document.getElementsByTagName('input')
var aDiv = document.getElementsByTagName('div')
for(var i =0 i<aBtn.lengthi++)
{
(function(index){ //因为要存储点击的下标，所以需要做一个参数引入。学名叫'自执行匿名函数'。
aBtn[i].onclick=function(){
//这个for循环的作用是将所以的都隐藏。
for(var i =0 i<aBtn.lengthi++)
{
aBtn[i].className=''
aDiv[i].className=''
}
//这是将当前点击的显示。
this.className='active'
aDiv[index].className='active'
}
})(i)
}
}
</script>
</head>
<body>
<input type="button" value="111" class='active' />
<input type="button" value="222" />
<input type="button" value="333" />
<div class="active">11111111111</div>
<div>22222222222</div>
<div>33333333333</div>
</body>
