zoukankan      html  css  js  c++  java
  • 原生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);//绑定元素对应的索引

              }

          }

      //这种方案一般也用于轮播图,当然是用框架就不用考虑这么多问题了  

  • 相关阅读:
    C if语句判断年龄
    C 计算时间差
    C 计算身高
    JRebel激活破解完美解决方式
    Maven optional和scope
    判断当前时间是否在某个时间段内
    给定时间加上几个小时
    RabbitMQ学习笔记
    浏览器、服务器会话
    Maven核心知识点梳理
  • 原文地址:https://www.cnblogs.com/angle-xiu/p/11312247.html
Copyright © 2011-2022 走看看