javascript之通用简单的table选项卡实现(二)_javascript技巧

回归原始，当样式切换后，把控制权还给页面，即table.js仅控制切换样式和记录操作：

复制代码 代码如下:

• 
  选项一
  


• 
  选项二
  


• 
  选项三
  


• 
  选项四
  


• 
  选项五
  

这是第一个选项卡的内容

这是第二个选项卡的内容

这是第三个选项卡的内容

这是第四个选项卡的内容

这是第五个选项卡的内容

复制代码 代码如下:

//回调函数 可用参数：obj.lastIndex(上次选项索引) obj.index(当前选项索引) obj.arr(选项卡元素数组)
var back=function(obj)
{
var lastPoint=obj.arr[obj.lastIndex].getAttribute("point");
var curentPoint=obj.arr[obj.index].getAttribute("point");
document.getElementById(lastPoint).style.display="none";
document.getElementById(curentPoint).style.display="block";
}
//参数分别为：选项块ID 选中的样式 回调函数 默认选择项（0开始）
table("sidebar", "active",back,0);

table.js代码如下：

复制代码 代码如下:

/**
* @author Sky
*/
var table=function(id,active,callBack,index)
{
table[id]=new Table(id,active,callBack,index);
table[id].bind();
}
var Table=function(id,active,callBack,index)
{
this.index=parseInt(index)||0;//当前索引
this.lastIndex=this.index;//上次索引
this.callBack=callBack||function(){};
this.active=active||"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[i].setAttribute("extatt", i);//钩子
this.arr[i].onclick = function(e)
{
var _e = window.event||e;
var _target=_e.srcElement || _e.target;
_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]);
}
}