Javascript universal simple table tab implementation_javascript skills

Step one: Reference table.js

Copy code The code is as follows:

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

Step 2: Define the selected style , such as "active", apply The ID of the tab block, such as "sidebar", and the default selected sequence number, such as the first "0";
Step 3: Call the function:

Copy code The code is as follows:

Everything is OK, the tab responds to the click event and serves as IE and FF, wait until you have time to optimize, the effect is as follows:

HTML source code is as follows:

Copy Code The code is as follows:

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

• 
  Option one
  


• 
  Option two
  


• 
  Option three
  


• 
  Option four
  


• 
  Option five
  

table.js

Copy code The code is as follows:

/**
* @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;//Initialization
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 download