先分享一个不能实现的实例(因为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. python 简单了解一下 描述器

    1.描述器是什么? 在Python中描述器也被称为描述符, 1)描述器实际上是任何新式类(新式类是继承自 type 或者 object 的类),这种类至少实现了3个特殊的方法__get__, __se ...

  2. cs6.8-oracle挂载ceph

    https://ceph-users.ceph.narkive.com/EgcYJhbG/hammer-0-94-1-still-getting-feature-set-mismatch-for-ce ...

  3. Qt编写自定义控件31-面板仪表盘控件

    一.前言 在Qt自定义控件中,仪表盘控件是数量最多的,写仪表盘都写到快要吐血,可能是因为各种工业控制领域用的比较多吧,而且仪表盘又是比较生动直观的,这次看到百度的echart中有这个控件,所以也来模仿 ...

  4. 在Mac 搭建robotframework 环境

    折腾来一下午,遇到了好多坑 坑 1.不要用pip 下载wxpython 2.不要用mac自带的python 3.不要自己下载wxpython 步骤: 1. 安装homebrew, /usr/bin/r ...

  5. 读取yml 文件中的参数

    第一种方法: yml 文件: spring: main: allow-bean-definition-overriding: true cloud: consul: host: 192.168.1.1 ...

  6. Java NIO 学习笔记 读写结合补充

    小练习:nio读写文件,将fileread中的内容读取到filewrite中 try { //创建输入通道 FileInputStream fis = new FileInputStream(&quo ...

  7. 使用XCode7打包动态库(Framework)

    iOS中的静态库和动态库 概念 静态库(Static Library)以 .a 为后缀,它是你的源码的实现.m文件编译而成的二进制文件集合,需要配合上暴漏的.h文件使用,它在引用链接时拷贝至可执行文件 ...

  8. golang struct组合,转型问题请教

    type Action interface { OnHurt2(other Action) GetDamage() int } type Base struct { atk, hp int } fun ...

  9. Awvs–网络漏洞扫描工具

    Awvs漏洞扫描自动化 在WEB安全方面,安全侧使用Acunetix_Web_Vulnerability_Scanner_11.xWEB漏洞扫描工具定期手工对m站和www站进行全站漏洞扫描. 为了防止 ...

  10. Java 之前总结

    写Java程序 1使用记事本,编写代码 2命名为文件里的类名称相一致 “.java” 3编译编译器创建class文件 编译 打开命令行窗口,进入Java文件所在的目录,执行命令:javac Welco ...