Universal simple table tab implementation in javascript (2)_javascript skills

Return to the original, when the style is switched, control is returned to the page, that is, table.js only controls the switching style and recording operations:

Copy code The code is as follows: New Web Project .sidebar { width: 140px; background: #C9E4D6; min-height: 600px; float: left; border-left: solid 1px #C8C8C8; } .sidebar ul { list-style:none; text-align: left; padding: 20px 0px 0px 0px; } .sidebar ul li { border-bottom: 1px dotted #C8C8C8; font-size: 14px; height: 30px; line-height: 30px; padding-left: 15px; margin- left: 15px; cursor: pointer; } .sidebar .active { background: #fff; } .content{ height:600px; width:400px; border-right:1px solid #ccc; margin-left:140px; padding:20px; display:none; } Option one Option two Option three Option four &lt ;li point="table5"> Option five This is the content of the first tab This is the content of the first tab The content of the two tabs This is the content of the third tab This is the content of the fourth tab This is the content of the fifth tab //Available parameters for the callback function: obj.lastIndex (last option index) obj.index (Current option index) obj.arr (tab element array) 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"; } //The parameters are: option block ID selected style callback function default selection (starting with 0) table("sidebar", "active",back ,0); Copy code The code is as follows: //Available parameters for the callback function: obj.lastIndex (last option index) obj.index (current option index) obj.arr (tab element array) 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"; } // The parameters are: option block ID selected style callback function default selection (starting with 0) table("sidebar", "active",back,0); table.js code As follows: Copy code The code is as follows: /** * @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]); } }