原生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一样的操作方法. 学起 ...
随机推荐
- Mac 平台安装MySQL
Mac 平台安装MySQL 一.下载MySQL MySQL官网上https://dev.mysql.com/downloads/mysql/,下载Community Server版 出现如下界面, ...
- Mac OS xshell xftp 替代工具-finalshell
安装步骤: 1,打开Mac 终端: 2,输入: curl -L -o finalshell_install.sh www.hostbuf.com/downloads/finalshell_instal ...
- go一个简单的爬虫(豆瓣)
最近在学习go语言爬虫,写了个小demo package main import ( "fmt" "io/ioutil" "net/http" ...
- Google Directions API 中路线编码解析
public List<Location> GetGeoPoints(string encoded) { List<Location> poly = new List<L ...
- oracle赋予一个用户具有查询另一个用户所有表数据
一 以需要被查询的用户登录oracle(假如为A) B为要查询A用户下的表的用户 二 执行查询语句: select 'grant select on A.'|| tname ||' to B ...
- Redis CrackIT 入侵事件引发Linux 沦陷
▲针对全球6379端口的redis服务器做了扫描,结果如上图 如图开放在公网的redis的6379端口的ip总数有63443个.无密码认证的IP有43024个,在总数占比里达到67%.发现遭受到red ...
- 查看oracle数据库的链接数和用户
http://www.cnblogs.com/is1988/archive/2012/11/21/2780067.html 1.查询oracle的连接数select count(*) from v$s ...
- HDU 1159 最长公共子序列
Common Subsequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- golang struct组合,转型问题请教
type Action interface { OnHurt2(other Action) GetDamage() int } type Base struct { atk, hp int } fun ...
- 添加学生信息(java wb)
要求: 1.登录账号:要求由6到12位字母.数字.下划线组成,只有字母可以开头: 2.登录密码:要求显示“• ”或“*”表示输入位数,密码要求八位以上字母.数字组成: 3.性别:要求用单选框或下拉框实 ...