Javascript 범용 단순 테이블 탭 구현_javascript 기술

< ;script type="text/javascript" src="table.js">

< ;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

/css">
.sidebar {
너비: 140px;
배경: #C9E4D6;
최소 높이: 600px;
float: 왼쪽;
border-left: 단색 1px #C8C8C8;
.sidebar ul {
목록 스타일: 없음
텍스트 정렬: 왼쪽
패딩: 20px 0px
}
.sidebar ul li {
border-bottom: 1px dotted #C8C8C8;
font-size: 14px;
height: 30px;
line-height: 30px>padding-left: 15px ;
왼쪽 여백: 15px;
커서: 포인터
.sidebar .active {
배경:
}
🎜>








table.js





코드 복사


코드는 다음과 같습니다.

this .arr=document.getElementById(id).getElementsByTagName("li"); =active;
}
Table.prototype={
bind:function()
{
this.arr[this.index].className=this.active;//초기화
var _self=this;
for (var i = 0; i < this.arr.length; i )
{
this.arr[i].setAttribute("ext", i);
this.arr[i].onclick = function(e)
{
var _e = window .event||e
var _target=_e.srcElement || >_self.setClass(parseInt(_target.getAttribute("ext")));
}
}
},
setClass:function(index)
{
this.arr [this.index].className="";
this.arr[index].className=this.active;
this.index=index;
}



데모 다운로드