javascript (2)_javascript 기술로 범용 단순 테이블 탭 구현

원본으로 돌아가서 스타일이 전환되면 제어가 페이지로 반환됩니다. 즉, table.js는 스타일 전환과 녹음 작업만 제어합니다.

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

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

코드는 다음과 같습니다.

/**
* @author 스카이
*/
var table=function(id,active,callBack,index)
{
table[id]=new Table(id,active,callBack) ,색인);
테이블[id].bind();
}
var Table=function(id,active,callBack,index)
{
this.index=parseInt(index)||0;//当前索引
this.lastIndex= this.index;//上次索引
this.callBack=callBack||function(){};
this.active=활성||"활성";
this.id=id;
this.arr=document.getElementById(id).getElementsByTagName("li");
}
Table.prototype={
bind:function()
{
//初始化选项样式
this.setTable(this.index);
//결정사례
var _self=this;
for (var i = 0; i < this.arr.length; i )
{
this.arr[i].setAttribute("extatt", i);//钩子
this.arr[i].onclick = function(e)
{
var _e = window.event||e;
var _target=_e.srcElement || _e.대상;
_self.setTable(parseInt(_target.getAttribute("extatt")));
}
}
},
setTable:function(index)
{
this.lastIndex=this.index;
this.index=index;
//清除之前选项的样式
this.arr[this.lastIndex].className="";
//激活当前选项的样式
this.arr[this.index].className=this.active;
//执行回调函数
this.callBack(table[this.id]);
}
}