tab example

Keywords: Front-end github Attribute

A simple tab development
The following methods are used
changeTabHandle function used in method 1-3

//Index of the current click button
function changeTabHandle(n) {
    for(var i=0; i<tabList.length; i++){
        tabList[i].className = '';
        divList[i].className = '';
    }
    tabList[n].className = 'active';
    divList[n].className = 'active'; 
}
  1. Custom Property Name

    // Method 1: Customize attribute method
    console.log(tabList);
    for (var i = 0;i < tabList.length; i++){

       tabList[i]._f_index = i;
       tabList[i].onclick = function () {
           console.dir(this);
           changeTabHandle(this._f_index);
       }  

    }

  2. es6 let

    // Method 2: var - > let
    for(let i=0; i<tabList.length; i++){

       tabList[i].onclick = function() {
           changeTabHandle(i);
       }

    }

  3. closure

Method 1:

for(var i=0; i<tabList.length; i++){
     ~function (i) {
         tabList[i].onclick = function () {
             changeTabHandle(i);
         }
     }(i)
 }

Method two:

 for(var i=0; i<tabList.length; i++){
     tabList[i].onclick = function (i) {
         return function() {
             changeTabHandle(i);
         }
     }(i)
 }
  1. Memory was last selected instead of emptying all + custom attributes

    beforeIndex = 0;
    for(var i=0; i<tabList.length; i++){

    tabList[i]._f_index = i;
    tabList[i].onclick = function() {
        
        tabList[beforeIndex].className = '';
        divList[beforeIndex].className = '';
        tabList[this._f_index].className = 'active';
        divList[this._f_index].className = 'active';
        beforeIndex = this._f_index;
    }

    }

5. Memory last time was the selected one, not all empty + let

for(let i=0; i<tabList.length; i++){
    tabList[i].onclick = function (params) {
        tabList[beforeIndex].className = '';
        divList[beforeIndex].className = '';
        tabList[i].className = 'active';
        divList[i].className = 'active';
        beforeIndex = i;
    }
}

github instance code https://github.com/fung-yu/js... tab in China

Posted by ghostcoder on Sun, 03 Feb 2019 01:30:16 -0800