先分享一个不能实现的实例(因为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. Mac 平台安装MySQL

    Mac 平台安装MySQL   一.下载MySQL MySQL官网上https://dev.mysql.com/downloads/mysql/,下载Community Server版 出现如下界面, ...

  2. Mac OS xshell xftp 替代工具-finalshell

    安装步骤: 1,打开Mac 终端: 2,输入: curl -L -o finalshell_install.sh www.hostbuf.com/downloads/finalshell_instal ...

  3. go一个简单的爬虫(豆瓣)

    最近在学习go语言爬虫,写了个小demo package main import ( "fmt" "io/ioutil" "net/http" ...

  4. Google Directions API 中路线编码解析

    public List<Location> GetGeoPoints(string encoded) { List<Location> poly = new List<L ...

  5. oracle赋予一个用户具有查询另一个用户所有表数据

    一  以需要被查询的用户登录oracle(假如为A)   B为要查询A用户下的表的用户 二  执行查询语句: select 'grant select on A.'|| tname ||' to  B ...

  6. Redis CrackIT 入侵事件引发Linux 沦陷

    ▲针对全球6379端口的redis服务器做了扫描,结果如上图 如图开放在公网的redis的6379端口的ip总数有63443个.无密码认证的IP有43024个,在总数占比里达到67%.发现遭受到red ...

  7. 查看oracle数据库的链接数和用户

    http://www.cnblogs.com/is1988/archive/2012/11/21/2780067.html 1.查询oracle的连接数select count(*) from v$s ...

  8. HDU 1159 最长公共子序列

    Common Subsequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

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

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

  10. 添加学生信息(java wb)

    要求: 1.登录账号:要求由6到12位字母.数字.下划线组成,只有字母可以开头: 2.登录密码:要求显示“• ”或“*”表示输入位数,密码要求八位以上字母.数字组成: 3.性别:要求用单选框或下拉框实 ...