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

1단계: table.js 참조

코드 복사 코드는 다음과 같습니다.

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

2단계: "active"와 같은 선택한 스타일 을 정의합니다. , "사이드바"와 같은 탭 블록의 ID 및 첫 번째 "0"과 같은 기본 선택 시퀀스 번호를 적용합니다.
3단계: 함수 호출:

코드 복사 코드는 다음과 같습니다.

모두 OK이면 탭이 클릭 이벤트에 응답하고 IE 및 FF 역할을 하며 최적화할 시간이 있을 때까지 기다립니다. 효과는 다음과 같습니다.


HTML 소스 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

< ;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 {
배경:
}
🎜>

하나

옵션 2

옵션 3
🎜>

옵션 4

옵션 5

table.js





코드 복사


코드는 다음과 같습니다.

/*** @author 스카이
*/

var table=function(index,id,active) { table=new Table(index,id, active) table.bind() } var Table=function (index,id,active) {

this.index=parseInt(index);

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;
}



데모 다운로드