原生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一样的操作方法. 学起 ...
随机推荐
- 五一 DAY 4
DAY 4 2019.5.1 PART 1 进制转化 10 = 23+21= 1010(2) = 32+30= 101(3) 进制转化常见问题: 1.十进制数 x ----&g ...
- 关于Jetson Kit开发相关资料
首先是nVidia官方对于Jetson Kit的介绍: http://www.nvidia.com/object/jetson-tk1-embedded-dev-kit.html https://de ...
- [maven][转]pom配置之:snapshot快照库和release发布库
在使用maven过程中,我们在开发阶段经常性的会有很多公共库处于不稳定状态,随时需要修改并发布,可能一天就要发布一次,遇到bug时,甚至一天要发布N次.我们知道,maven的依赖管理是基于版本管理的, ...
- PAT 甲级 1016 Phone Bills (25 分) (结构体排序,模拟题,巧妙算时间,坑点太多,debug了好久)
1016 Phone Bills (25 分) A long-distance telephone company charges its customers by the following r ...
- 【转载】CentOS7下使用LVM给系统硬盘扩容
原文地址:https://www.cnblogs.com/ding2016/p/9680690.html 简单介绍: LVM是逻辑盘卷管理(Logical Volume Manager)的简称,它是L ...
- 建立本地yum仓库
[root@ks-server ~]# cd /etc/yum.repos.d/[root@ks-server yum.repos.d]# ls CentOS-Base.repo CentOS-Med ...
- flask蓝图blueprint是什么
蓝图 blueprint 简单的说,就是帮助我们对flask程序进行目录结构的划分:django项目创建时,是自动生成项目目录,而在flask这里,需要我们自己来规划,这就需要blueprint来将整 ...
- docker教程(1) - 快速使用
docker 笔记(1) --docker安装.获取镜像.启动容器.删除容器 一.安装 Docker 官方文档 根据官方文档整理简单流程 从Docker Hub下载mac包 运行磁盘镜像,将Docke ...
- 【机器学习】sigmoid函数求导 手写过程
- sql server新旧数据库的表结构差异
sql server编写通用脚本自动检查两个不同服务器的新旧数据库的表结构差异 问题:工作过程中,不管是什么项目,伴随着项目不断升级版本,对应的项目数据库业务版本也不断升级,数据库出现新增表.修改表. ...