原生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一样的操作方法. 学起 ...
随机推荐
- CentOS下yum安装mysql
其实跟windows下安装过程差别不大,就是下载为了方便使用了yum的方式.安装前先确认下系统是否还安装mysql,卸载是否不完全,再去官网(http://dev.mysql.com/download ...
- CentOS7.5使用RPM包安装MySQL5.7.22
参考:https://blog.csdn.net/sevenkoala/article/details/76163853 1,安装环境查看 2,下载安装rpm包 下载地址:https://downlo ...
- centos7:ssh免密登陆设置
1.使用root用户登录,进入到目录/root/.ssh 2.执行命令:ssh-keygen -t rsa 一路回车,完成后会在目录/root/.ssh下面生成文件 id_rsa和id_rsa.pub ...
- Bulid过程中中遇到的问题UnityEditor.BuildPlayerWindow+BuildMethodException: '' is an incorrect path for a scene file. BuildPlayer expects paths relative to the project folder.
今天,在Bulid的过程中,遇到了一个错误“ UnityEditor.BuildPlayerWindow+BuildMethodException: '' is an incorrect path f ...
- Eureka报错: Connect to localhost:8761 timed out
最近整理配置Eureka时, 注册服务后, Eureka服务一直报出如下错误: 如下是我的单台eureka的 application.yml 配置: spring: application: name ...
- JS实现对数组进行自定义排序
/** * 数组排序 * @param source 待排序数组 * @param orders 排序字段数组 * @param type 升序-asc 倒序-desc * 调用:var res = ...
- CentOS7编译安装libc++和libc++abi
本文介绍了如何在CentOS 7中构建C++11构建环境 Clang的定制C++库是libc++(libcxx).然后,libcxx还需要一个ABI库,libc++abi(libcxxabi).不幸的 ...
- storm常见问题
一.storm ui 不显示 supervisor 信息 在zk节点上删掉storm信息,重新启动storm集群即可
- [转帖]linux下CPU、内存、IO、网络的压力测试,硬盘读写速度测试,Linux三个系统资源监控工具
linux下CPU.内存.IO.网络的压力测试,硬盘读写速度测试,Linux三个系统资源监控工具 https://blog.51cto.com/hao360/1587165 linux_python关 ...
- Oracle 11.2.0.4_Linux单例篇
Linux 下安装Oracle步骤: 1.设置ip地址 2.设置主机名 3.安装oracle依赖的软件包 mkdir /media/cdrom -p mount /dev/cdrom /media ...