Dragging a story with tabs JS Object-oriented

In the current Web page, the tab (I like this is called) is very common, but also a comparative basis, learning the prototype implementation tab also quite a long time, recently learning ES6, learned to use the class implementation of the tab, today to do a summary, other nonsense is not much to say.

"Appearance" to say the appearance of the goods--fortunately, very handsome

(Self-understanding) tab: It is the goods that switch content by clicking on the head.

How to get this article HTML code

<div id="div1">        <input type="button" value="出国" class="active">        <input type="button" value="留学">        <input type="button" value="旅游">        <div style=‘display: block‘>123</div>        <div>456</div>        <div>789</div>    

CSS Code

#div1 div{            width: 200px;            height: 200px;            border: 1px solid #ccc;            display: none;        }        .active {            background: orange;        }

Getting Started with JS code

window.onload=function (){    var oDiv=document.getElementById(‘div1‘);    var aBtn=oDiv.getElementsByTagName(‘input‘);    var aDiv=oDiv.getElementsByTagName(‘div‘);        for(var i=0;i<aBtn.length;i++)    {        aBtn[i].index=i;        aBtn[i].onclick=function ()        {            for(var i=0;i<aBtn.length;i++)            {                aBtn[i].className=‘‘;                aDiv[i].style.display=‘none‘;            }            this.className=‘active‘;            //alert(this.index);            aDiv[this.index].style.display=‘block‘;        };    }};

Object oriented

 window.onload = function (){                new tab(‘div1‘);            }

Using prototypes to achieve

function tab(id){    var oDiv = document.getElementById(id);    this.aBtn = oDiv.getElementsTagName(‘input‘);    this.aDiv = oDiv.getElemetsTagName(‘div‘);    var _this = this;    for(var i=0;i<this.aBtn.length;i++){        this.aBtn[i].index = i;        this.aDiv[i].addEventListener(‘click‘,function(){            _this.tabSwitch(this);        },false)    }}tab.prototype.tabSwitch = function (oBtn){    for(var i=0;i<this.aBtn.length;i++)    {        this.aBtn[i].className = ‘‘;        this.aDiv[i].style.display = ‘none‘;    }    oBtn.className = ‘avtive‘;    this.aDiv[oBtn.index].style.display = ‘block‘;}

Implementation of classes class introduced by ES6

  Class Tab {constructor (id) {var odiv = document.getElementById (ID);                    THIS.ABTN = odiv.getelementsbytagname (' input ');                    This.adiv = odiv.getelementsbytagname (' div ');                    var _this = this;                        for (var i = 0; i < this.aBtn.length; i++) {this.abtn[i].index = i;                        This.abtn[i].addeventlistener (' click ', Function () {_this.tabswitch (this); }, False)}} tabswitch (OBTN) {for (var i = 0; i < this.aBtn.length;                        i++) {this.abtn[i].classname = ';                    This.adiv[i].style.display = ' None ';                    } obtn.classname = ' active ';                This.adiv[obtn.index].style.display = ' block '; }                }

About object-oriented (own understanding)

1. What is an object?
Object, which is a collection of properties and methods.
2. What is object-oriented?
Based on the three main characteristics of object-oriented:
Polymorphism: multiple states;
Encapsulation: The function is encapsulated into a tool, without too much attention how to achieve, will be used on the line;
Inheritance: Similar to CSS inheritance, inherits the parent's properties and methods.
The difference between facing objects in 3.js and facing objects in Java
JS is a prototype-based face object, while Java is the object-oriented class
4. How to understand the prototype in JS?
Prototypes can be used in CSS class to understand, that is, a set of elements through the prototype implementation of the same properties, methods.

1. Writing object-oriented with prototypes

   function User(name, pass){    this.name=name;    this.pass=pass;};User.prototype.showName=function(){    alert(this.name);}User.prototype.showPass=function(){    alert(this.pass);}function VipUser(name, pass, level){    User.call(this, name, pass);    this.level = level;}VipUser.prototype=new User();VipUser.prototype.constructor=VipUser;/*for(var i in User.prototype){    VipUser[i].prototype = User[i].prototype;}*/VipUser.prototype.showLevel=function(){    alert(this.level);};

   Object-oriented with class writing

   class person{constructor(name, age){    this.name = name;    this.age = age;}showName(){    alert(this.name);}showAge(){    alert(this.age);}}class vip extends person{constructor(name,age,sex) {    super(name, age);    this.sex = sex;}showSex(){    alert(this.sex);}}

Dragging a story with tabs JS Object-oriented