先分享一个不能实现的实例(因为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. 前端知识点回顾——Reactjs

    React.js 编写react需要安装的三个开发环境下的模块 babel 解析JSX react 实现ui用户界面 react-dom 处理dom JSX:在JavaScript里面写html代码( ...

  3. SQL-W3School-高级:SQL NULL 值

    ylbtech-SQL-W3School-高级:SQL NULL 值 1.返回顶部 1. NULL 值是遗漏的未知数据. 默认地,表的列可以存放 NULL 值. 本章讲解 IS NULL 和 IS N ...

  4. Androidstudio 编译慢 这样的体验肯定很多人都有!!!

    本人也是经历过的   在老板站在你身后  说看下你做的东西怎么样啦   然后你开始编译你刚写代码     然后过了老长一段时间    你默默的拿起水来喝   缓解尴尬   boss一直站在后面   忍 ...

  5. Java Web之过滤器(Filter)

    转: Java Web之过滤器(Filter) 2018年07月31日 16:58:40 喻志强 阅读数 13705更多 所属专栏: Java Web入门   版权声明:本文为博主原创文章, 转载请注 ...

  6. 从零搭建配置Cuckoo Sandbox

    1.安装依赖 $ sudo apt-get install git mongodb libffi-dev build-essential python-django python python-dev ...

  7. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_8.RabbitMQ研究-工作模式-发布订阅模式-生产者

    Publish/subscribe:发布订阅模式 发布订阅模式: 1.每个消费者监听自己的队列. 2.生产者将消息发给broker,由交换机将消息转发到绑定此交换机的每个队列,每个绑定交换机的队列都将 ...

  8. xcode报错: 找不到路径或者资源错误:no such file or directory

    报错截图: 出现的问题: 运行项目页面图片不显示. 解决方法: 1>[COMMAND+shift+G],前往文件夹,输入:  ~/Library/Developer/Xcode/DerivedD ...

  9. centos6.x一直停留在进度条的问题

    由于屏幕关闭加上长时间没有操作可能导致centos进行深度休眠,此时只能通过电源键来强制重启.可以通过修改X11的配置来禁止休眠,配置文件为/etc/X11/xorg.conf,注意修改此文件前记得备 ...

  10. 为Django添加图片验证码

    可直接复制到Django项目中使用 # author:sunshine from django.http import HttpResponse from PIL import Image, Imag ...