JS based on object-oriented Implementation of the TAB effect sample _javascript Tips

The example of this article tells JS based on object-oriented Implementation of the tab effect. Share to everyone for your reference, specific as follows:

Intermediate Transition: changing process-oriented procedures into object-oriented forms

Rewrite considerations:

1. Prerequisite: All code must be included in the Window.onload
2. Remove function nesting (window.onload inside the nested function carried to the window.onload outside)
3. Cannot have function nesting, but can have global variables (such as the onclick function to carry out, ABTN is the window.onload function of the private variable, the onclick function can not be used)

Process:

1.onload (initialization of the entire program) → Constructor (Initialize an object)
2. Global variables → Properties
3. Function → method

 Window.onload=function () {var otab=new tabswitch ("Div1");} function Tabswitch (id) {V
  AR Odiv=document.getelementbyid (ID);
  This.abtn=odiv.getelementsbytagname (' input ');
  This.adiv=odiv.getelementsbytagname (' div ');
  var i=0;     var _this=this;
    This is the new object, the Otab for (i=0;i<this.abtn.length;i++) {this.abtn[i].index=i;  This.abtn[i].onclick=function () {_this.tab (this);
  Through the Parameter form, will be clicked the button to pass to the below};
}
};
    Tabswitch.prototype.tab=function (OBTN) {for (i=0;i<this.abtn.length;i++) {this.abtn[i].classname= ';
  This.adiv[i].style.display= ' None ';  } obtn.classname= ' active ';
The button to be clicked is changed instead of the new object, so this is not the this.adiv[obtn.index].style.display= ' block '; }

More readers interested in JavaScript-related content can view the site topics: "JavaScript object-oriented Tutorial", "JavaScript switching effects and techniques summary", "JavaScript animation effects and tips summary", " JavaScript Search Algorithm Skills summary, JavaScript data structure and algorithm skills summary, JavaScript traversal algorithm and skills summary, JavaScript in the JSON operation tips Summary, javascript error and Debugging skills summary And the summary of JavaScript mathematical operation usage

I hope this article will help you with JavaScript programming.