javascript通用简单的table选项卡实现_javascript技巧
来源：知道科技
第一步：引用table.js
代码如下:
第二步：定义选中的样式，比如“active”，应用选项卡的块的ID，比如“sidebar”，默认被选中的序号，比如第一个“0”；
第三步：调用函数：
代码如下:
//参数分别为：默认选择项 应用块的id 选中的样式
table(0, "sidebar", "active")
一切OK，选项卡响应click事件，兼任IE和FF，等有时间了再优化，效果如下：
HTML源代码如下：
代码如下:
New Web Project
选项一
选项二
选项三
选项四
选项五
//参数分别为：默认选择项 应用块的id 选中的样式
table(0, "sidebar", "active")
table.js
代码如下:
/**
* @author Sky
*/
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");
this.active=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 || _e.target;
_self.setClass(parseInt(_target.getAttribute("ext")));
}
}
},
setClass:function(index)
{
this.arr[this.index].className="";
this.arr[index].className=this.active;
this.index=index;
}
}
DEMO下载
显示全文