Home > Web Front-end > JS Tutorial > A simple example of tab development (code)

A simple example of tab development (code)

不言
Release: 2018-10-16 15:41:08
forward
1745 people have browsed it

This article brings you a simple example (code) of tab development. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
The following methods are used
changeTabHandle function used in methods 1-3

//当前点击按钮的索引
function changeTabHandle(n) {
    for(var i=0; i<tabList.length; i++){
        tabList[i].className = &#39;&#39;;
        pList[i].className = &#39;&#39;;
    }
    tabList[n].className = &#39;active&#39;;
    pList[n].className = &#39;active&#39;; 
}
Copy after login

Custom attribute name

   //方法一:自定义属性方法
   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);
   } 
   }
Copy after login

es6 let

   //方法二:var --> let
   for(let i=0; i<tabList.length; i++){
   tabList[i].onclick = function() {
       changeTabHandle(i);
   }
   }
Copy after login

Closure

Method 1:

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

Method 2:

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

Remember which one was selected last time instead of clearing 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 = '';
    pList[beforeIndex].className = '';
    tabList[this._f_index].className = 'active';
    pList[this._f_index].className = 'active';
    beforeIndex = this._f_index;
}
}
Copy after login

Memory last time it was the one that was selected instead of clearing all let

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

github example code https://github.com/fung-yu/js... Tab chapter

The above is the detailed content of A simple example of tab development (code). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template