原生js实现选项卡样式切换的几种方式。
先分享一个不能实现的实例(因为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实现选项卡样式切换的几种方式。的更多相关文章
- 原生JS—实现图片循环切换的两种方法
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...
- 原生js动态创建文本内容的几种方式
1.通过CreateTextNode文本节点 首先创建该元素(元素节点),然后向一个已存在的元素追加该文本节点 <!DOCTYPE html> <html> <body& ...
- 原生JS—实现图片循环切换及监测鼠标滚动切换图片
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- 【javascript】原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- 原生JS实现图片循环切换
<!-- <!DOCTYPE html> <html> <head> <title>原生JS实现图片循环切换 —— 方法一</title&g ...
- JS与JQ绑定事件的几种方式.
JS与JQ绑定事件的几种方式 JS绑定事件的三种方式 直接在DOM中进行绑定 <button onclick="alert('success')" type="bu ...
- jQuery Mobile页面跳转切换的几种方式
jQuery Mobile在移动开发中越来越受到欢迎. 而他的各个版本号也在持续不断的更新中.相同的我也非常喜欢它,它加快了我们开发HTML5的速度. 同一时候又具备jQuery一样的操作方法. 学起 ...
随机推荐
- 《你不知道的JavaScript(上)》笔记——函数作用域和块作用域
关于函数声明:如果 function 是声明中的第一个词, 那么就是一个函数声明, 否则就是一个函数表达式.例如匿名函数这种形式,函数会被当作函数表达式而不是一个标准的函数声明来处理. (functi ...
- Qemu搭建ARM vexpress开发环境(一)
Qemu搭建ARM vexpress开发环境(一) 标签(空格分隔): Qemu ARM Linux 嵌入式开发离不开硬件设备比如:开发板.外设等,但是如果只是想学习研究Linux内核,想学习Linu ...
- kotlin中对象表达式
在kotlin中,也有类似的功能,但不是匿名类,而是对象,需要使用object关键字,对象要继承的列需要与object之间的冒号(:)分隔. fun main(arg: Array<String ...
- 数据分析 - Power BI
BI 目的 单表的展示有限很多的时候只能体现现象, 仅仅进行监控级别没问题 但是就数据分析而言实在不够用, 大部分的事情需要多表多图展示才可以通过现象深入挖掘诱因 BI 安装 这里使用 microso ...
- 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_3.RabbitMQ研究-工作原理
Producer生产者 Consumer:消费者 组成部分说明如下: Broker:消息队列服务进程,此进程包括两个部分:Exchange和Queue. Exchange:消息队列交换机,按一定的规则 ...
- python 内置数据结构 字符串
字符串 一个个字符组成的有序的序列,是字符的集合 使用单引号,双引号,三引号引住的字符序列 字符串是不可变对象 Python3起,字符串就是Unicode类型 字符串定义 初始化 s1 = 'stri ...
- Java连接阿里云HBase示例
使用前要在阿里云的 HBase控制台中点击"修改网络白名单",然后将你的ip地址(会有提示的)添加到网络白名单中,这样以后才能访问. 所需依赖: <dependencies& ...
- Clonezilla克隆还原系统
简介 Clonezilla是一个专门用来克隆磁盘驱动器的Linux发行版.它可以操作任何你所能想象到的文件系统类型.Clonezilla有两种版本:Live和SE.Live版本与Ubuntu的Live ...
- Python3 Selenium自动化web测试 ==>FAQ:PyCharm中脚本不执行main函数内容解决方案
FAQ: 情景:之前写好可以正常执行的python脚本,突然main函数下的代码不运行 原因:pycharm中,会设置py脚本按照unittest的方式运行,也就是只运行用例,不运行main函数下代码 ...
- LeetCode刷题1——只出现一次的数字
一.题目要求 二.题目背景 位运算:或,异或,与,移位 三.解题思路 (1)要求算法时间复杂度是线性的,O(n),想到的是先将列表排序,排序后相同的数值两两之间前后相邻,进行偶数次循环,判断两两数值是 ...