先分享一个不能实现的实例(因为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);//绑定元素对应的索引

          }

      }

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

原生js实现选项卡样式切换的几种方式。的更多相关文章

  1. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  2. 原生js动态创建文本内容的几种方式

    1.通过CreateTextNode文本节点 首先创建该元素(元素节点),然后向一个已存在的元素追加该文本节点 <!DOCTYPE html> <html> <body& ...

  3. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  4. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  5. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  6. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  7. 原生JS实现图片循环切换

    <!-- <!DOCTYPE html> <html> <head> <title>原生JS实现图片循环切换 —— 方法一</title&g ...

  8. JS与JQ绑定事件的几种方式.

    JS与JQ绑定事件的几种方式 JS绑定事件的三种方式 直接在DOM中进行绑定 <button onclick="alert('success')" type="bu ...

  9. jQuery Mobile页面跳转切换的几种方式

    jQuery Mobile在移动开发中越来越受到欢迎. 而他的各个版本号也在持续不断的更新中.相同的我也非常喜欢它,它加快了我们开发HTML5的速度. 同一时候又具备jQuery一样的操作方法. 学起 ...

随机推荐

  1. 五一 DAY 4

    DAY 4    2019.5.1 PART 1    进制转化 10 = 23+21= 1010(2)       = 32+30= 101(3) 进制转化常见问题: 1.十进制数 x ----&g ...

  2. 关于Jetson Kit开发相关资料

    首先是nVidia官方对于Jetson Kit的介绍: http://www.nvidia.com/object/jetson-tk1-embedded-dev-kit.html https://de ...

  3. [maven][转]pom配置之:snapshot快照库和release发布库

    在使用maven过程中,我们在开发阶段经常性的会有很多公共库处于不稳定状态,随时需要修改并发布,可能一天就要发布一次,遇到bug时,甚至一天要发布N次.我们知道,maven的依赖管理是基于版本管理的, ...

  4. PAT 甲级 1016 Phone Bills (25 分) (结构体排序,模拟题,巧妙算时间,坑点太多,debug了好久)

    1016 Phone Bills (25 分)   A long-distance telephone company charges its customers by the following r ...

  5. 【转载】CentOS7下使用LVM给系统硬盘扩容

    原文地址:https://www.cnblogs.com/ding2016/p/9680690.html 简单介绍: LVM是逻辑盘卷管理(Logical Volume Manager)的简称,它是L ...

  6. 建立本地yum仓库

    [root@ks-server ~]# cd /etc/yum.repos.d/[root@ks-server yum.repos.d]# ls CentOS-Base.repo CentOS-Med ...

  7. flask蓝图blueprint是什么

    蓝图 blueprint 简单的说,就是帮助我们对flask程序进行目录结构的划分:django项目创建时,是自动生成项目目录,而在flask这里,需要我们自己来规划,这就需要blueprint来将整 ...

  8. docker教程(1) - 快速使用

    docker 笔记(1) --docker安装.获取镜像.启动容器.删除容器 一.安装 Docker 官方文档 根据官方文档整理简单流程 从Docker Hub下载mac包 运行磁盘镜像,将Docke ...

  9. 【机器学习】sigmoid函数求导 手写过程

  10. sql server新旧数据库的表结构差异

    sql server编写通用脚本自动检查两个不同服务器的新旧数据库的表结构差异 问题:工作过程中,不管是什么项目,伴随着项目不断升级版本,对应的项目数据库业务版本也不断升级,数据库出现新增表.修改表. ...