javascript操作ul,li元素進行分頁

在網站開發中,瀏覽的空間是有限的,當內容較多時就要考慮分頁,不可能在一個顯示屏上顯示所有的內容,在桌面系統中有現成的控件可以使用,而在網站開發中就要用到javascript操作ul,li來進行分頁了,覺得有必要整理一下.

<div id="header">

<ul>

<li id="current1" class="current"><a style="cursor:hand; font-size:12px" onclick="change_option(4,1);" onFocus=if(this.blur)this.blur()>基本信息</a></li>

<li id="current2"><a style="cursor:hand;font-size:12px" onclick="change_option(4,2);" onFocus=if(this.blur)this.blur()>附加信息</a></li> <li id="current3"><a style="cursor:hand;font-size:12px" onclick="change_option(4,3);" onFocus=if(this.blur)this.blur()>上传图片</a></li>

<li id="current4"><a style="cursor:hand;font-size:12px" onclick="change_option(4,4);" onFocus=if(this.blur)this.blur()>邮件信息</a></li>

</ul>

</div>

其中change_option(4,1)函數用來判斷當點擊了某個li元素時,相應的改變其他li的CSS標簽,以及控制某個模組的顯示與隱藏.

function change_option(number,index){

for (var i = 1; i <= number; i++) {

document.getElementById('current' + i).className = '';

document.getElementById('content' + i).style.display = 'none';

}

document.getElementById('current' + index).className = 'current';

document.getElementById('content' + index).style.display = 'block';

}

以下是CSS文件

<style type="text/css">

#header {

width:100%;

/*background:#D3D3D3;border-bottom:solid 2px #7FBFFF ;*/

font-size:93%;

/*line-height:normal;border-bottom:solid 2px #3399CC;*/

}

#header ul {

margin:0;

padding:0px;

list-style:none;

}

#header li {

float:left;

background:#DCE1EF;

border:solid 1px #8EA2C2;

margin-left:2px;

padding:0px;

}

#header a {

display:block;

padding:5px 15px 4px;

}

#header .current {

/*background:#FFFFFF;*/

background-color:#3399CC;

border-left:solid 1px #7FBFFF;

border-top:solid 1px #7FBFFF;

border-right:solid 1px #7FBFFF;

border-bottom:solid 0px #7FBFFF;

}

#header .current a{

padding-bottom:5px;

}

.content {

margin-top:10px;

}

</style>