Native JavaScript rewritten tab tab

<!--CSS section--

<style>

*{
margin:0;
padding:0;
}

ul,li{
List-style:none
}
. tabbox{
width:600px;
Clear:both;
Overflow:hidden;
margin:0 Auto;
border:1px solid #ccc;
}
ul.tabnav{
width:600px;
height:30px;
border-bottom:1px solid #ccc;
}

Ul.tabnav li{
width:198px;
height:30px;
line-height:30px;

Float:left;

border-right:1px solid #ccc;
Text-align:center;
}

Ul.tabnav li.active{
color:red;
}

. tabcontent{
width:460px;
Overflow:hidden;;
padding:20px;
}

. tabcontent ul li{
Float:left;
Display:none;
}

. tabcontent ul li.active{
Display:block;
}

</style>

<!--HTML Structure--

<div class= "Tabbox" >
<ul class= "Tabnav" id= "Tabnav" >
<li class= "Item Active" > Language </li>
<li class= "Item" > English </li>
<li class= "Item" > Math </li>
</ul>

<div class= "tabcontent" id= "Tabcont" >
<ul>
<li class= "Item Active" > Chinese content </li>
<li class= "Item" > English content </li>
<li class= "Item" > Math content </li>
</ul>
</div>
</div>

<!--javascript-->

Function Switchtab (tabbtn,tabcontent) {

  var tabnav = document.getElementById (tabbtn);
  var tabcont = document.getElementById (tabcontent);

  This.tabnavli = tabnav.getelementsbytagname (' li ');
  This.tabcontli = tabcont.getelementsbytagname ("Li");

  var _this = this;    //Save the created variable tabs;

  for (var i=0, len=this.tabnavli.length; i<len; i++) {
      This.tabnavli[i].index = i ;
      This.tabnavli[i].onclick = function () {
      _this.tabshow (this);   //This is worth the current click of the option
   };
 }

}

SwitchTab.prototype.tabshow = function (obj) {//obj here is the object that is currently clicked button
For (var i=0, len=this.tabnavli.length; i<len; i++) {
This.tabnavli[i].classname = "";
This.tabcontli[i].classname = "";
}

Obj.classname = "active";
This.tabcontli[obj.index].classname = "active";
};

Window.onload = function () {
var tabs = new Switchtab ("Tabnav", "Tabcont");
};

</script>

The most important thing to rewrite into object-oriented is to be aware of who this refers to. There are two scenarios in which the value of this should be saved.

1. When there is a timer in the object-oriented program

function Aaa () {
THIS.A = 10;
var _this = this;
SetInterval (function () {
_this.show (); If you use this directly, then this point of this is the window
},1000);
}

Aaa.prototype.show = function () {
alert (THIS.A);
};

Window.onload = function () {
var AAA = new AAA ();
};

2. When there are events in the object-oriented program

function Bbb () {
THIS.A = 10;
var _this = this;
var btn = document.getElementById ("btn");

Btn.onclick = function () {
_this.show (); Here this is pointing to the current object
};
}

Bbb.prototype.show = function () {
alert (THIS.A);
};

Window.onload = function () {
var bbb = new BBB ();
};

Native JavaScript rewritten tab tab