原生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一样的操作方法. 学起 ...
随机推荐
- 以太坊Geth通过私钥导入新地址到钱包步骤
Open TextEdit Paste key into TextEdit without any extra characters or quotations Save the file as pk ...
- 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_11-修改页面-前端-Api调用
修改数据 这是提交按钮的事件editSubmit 注意修改的方法是put方法.所以用requestPut 操作成功自动返回 测试 成功后自动跳转到列表页 修改后的数据
- matlab学习——01线性规划
01线性规划 format compact; % min fx % Ax<=b % Aeq*x=beq % lb<=x<=ub % % max z=2x1+3x2-5x3 % x1+ ...
- ubuntu kylin 18.04 安装 Qt Creator 5.11
首先,去官网(https://download.qt.io/official_releases/qt/ )下载Qt Creator的安装包. 我下载的是5.11.1版本文件:qt-opensource ...
- Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入
前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...
- C++——文件的读写
C++中标准IO库的fstream头文件定义了三种支持文件IO的类型: ifstream,由istream派生而来,提供读文件的功能. ofstream,由ostream派生而来,提供写文件的功能. ...
- IIS 6.0的web园 最大工作进程数细谈
这篇文章主要介绍了IIS 6.0的web园 最大工作进程数,需要的朋友可以参考下:(摘自:http://www.jb51.net/article/84817.htm) IIS 6.0允许将应用程序池配 ...
- go module配置
参考文章: http://c.biancheng.net/view/4774.html 1.
- Nginx 开启支持谷歌Brotli压缩算法
参考链接:https://cloud.tencent.com/developer/article/1501009
- CentOS7.3安装Python3.6
安装python3.6可能使用的依赖 # yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sql ...