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]); } }

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

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