先分享一个不能实现的实例(因为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. SOCKET原理(转载)

    SOCKET原理 一.套接字(socket)概念 套接字(socket)是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元.它是网络通信过程中端点的抽象表示,包含进行网络通信必须的五种信息: ...

  2. linux rtc中废弃的接口和新的接口

    1. 废弃的接口 rtc_tm_to_time 2. 替换废弃接口的新接口 rtc_tm_sub

  3. 在基于Android以及Jetson TK平台上如何写32位的Thumb-2指令

    由于Android以及Jetson TK的编译工具链中的汇编器仍然不支持大部分的32位Thumb-2指令,比如add.w,因此我们只能通过手工写机器指令码来实现想要的指令.下面我将简单地介绍如何在AR ...

  4. MySQL、sqlalchemy、pymysql、mysqldb、DBAPI之间关系梳理(终于明白了)

    MySQL.sqlalchemy.pymysql.mysqldb.DBAPI之间关系梳理(终于明白了) python3不再支持mysqldb 请用pymysql和mysql.connector 问题背 ...

  5. 浏览器与NodeJS环境 eventloop异同详解(转)

    结论:浏览器中是一个宏任务,所有微任务,一个宏任务,所有微任务...           NodeJS中,一种宏任务队列所有任务,所有微任务,一种宏任务队列所有任务,所有微任务... ┌─────── ...

  6. JAVA 基础编程练习题23 【程序 23 求岁数】

    23 [程序 23 求岁数] 题目:有 5 个人坐在一起,问第五个人多少岁?他说比第 4 个人大 2 岁.问第 4 个人岁数,他说比第 3 个 人大 2 岁.问第三个人,又说比第 2 人大两岁.问第 ...

  7. img标签替换为mip-img标签的方法

    function replaceMipImages($content){ preg_match_all('/<img (.*?)\>/', $content, $images); if(! ...

  8. XGBoost原理详解

    原文:https://blog.csdn.net/qq_22238533/article/details/79477547

  9. Linux操作系统使用RPMBUILD命令打包RPM的详细步骤

    首先,我们需要了解一些预备知识,在旧版本的CentOS中,rpmbuild工具默认的工作路径是/usr/src/redhat,因为权限原因,一般用户身份不能制作rpm软件包,只能切换到root身份才能 ...

  10. 最新 58集团java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.58集团等10家互联网公司的校招Offer,因为某些自身原因最终选择了58集团.6.7月主要是做系统复习.项目复盘.Leet ...