原生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一样的操作方法. 学起 ...
随机推荐
- ylbtech-SQL-W3School-高级:SQL NOT NULL 约束
ylbtech-SQL-W3School-高级:SQL NOT NULL 约束 1.返回顶部 1. SQL NOT NULL 约束 NOT NULL 约束强制列不接受 NULL 值. NOT NULL ...
- [hibernate]log4jdbc日志输出完整SQL语句
1.在maven引入: <dependency> <groupId>log4j</groupId> <artifactId>log4j</arti ...
- mysql软件升降级及配置参数
1.下载mysql5.7的软件 https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.20-linux-glibc2.12-x86_64.tar.g ...
- 一百三十三:CMS系统之版块管理一
把模型创建到公共的models里面 class BoardModel(db.Model): __tablename__ = 'board' id = db.Column(db.Integer, pri ...
- scikit-learn机器学习(三)多项式回归(二阶,三阶,九阶)
我们仍然使用披萨直径的价格的数据 import matplotlib matplotlib.rcParams['font.sans-serif']=[u'simHei'] matplotlib.rcP ...
- c# 子窗体居中父窗体
1.设置CenterParent不管用.只好用代码控制. frmRunning_ = new FrmRunning(); frmRunning_.StartPosition = FormStartPo ...
- oracle自增主键
本文参考-https://www.cnblogs.com/xxaxx/p/3584036.html oracle没有像sqlserver中identity一样的函数,需要依赖于序列.触发器来实现自增主 ...
- 51nod1050 循环数组最大子段和
思路: 分两种情况讨论. 实现: #include <bits/stdc++.h> using namespace std; typedef long long ll; ; ll sum[ ...
- OpenCV.概念(读书笔记)
ZC:学习OpenCV.pdf 1.多通道矩阵(学习OpenCV.pdf) 1.1.在学习opencv的时候看到多通道矩阵这一概率,恳求大神告诉我一下什么意思_百度知道.html(https://zh ...
- 如何在视图中启用thymeleaf
1.在HTML标签中引入一个属性 <html xmlns:th="http://www.thymeleaf.org"> <!-- 引入xmlns:th属性才能启用 ...