原生js實現選項卡樣式切換的幾種方式。


  先分享一個不能實現的實例(因為es5沒有塊作用域)

    for(var i=0; i<list.length; i++ )

      {

        list[i].onclick = function(){

            tabchange(i);

          }

      }

  解決方案:

    1.es6新的變量聲明方式 let(es6具有塊級作用域,解決es5存在的問題)

 

    for(let i=0; i<list.length; i++ )

      {

        list[i].onclick = function(){

            tabchange(i);

          }

      }

    2.利用閉包

    for(var i=0; i<list.length; i++ )

      {

        list[i].onclick = (function(){

            return function(){

            tabchange(i);

            }

          })(i);

      }

    3.為元素對象創建對應的索引

    for(var i=0; i<list.length; i++ )

      {

        list[i].myindex=i;

        list[i].onclick = function(){

            tabchange(this.myindex);//綁定元素對應的索引

          }

      }

  //這種方案一般也用於輪播圖,當然是用框架就不用考慮這么多問題了  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM