js实现选项卡思路详解
标签:
JavaScript
注意点
1、js中所有的事件绑定都是异步编程的,开始只是给元素的点击胸围绑定了一个方法,但是需要手动点击才会执行这个方法,在此期间,不会干等着,继续下一次循环,当点击的时候循环早已经结束
2、在给元素绑定事件的时候,绑定的这个方法还只是定义的部分,此时方法中存储的都是字符串,我们看到的i只是一个字符
3、当点击的时候,执行对应的绑定方法,形成一个私有的作用域,在A中会使用到变量i,而i不是自己私有的,是上级作用域window下的i,此时windoew下的i已经变为li.length
解决方案
一、使用闭包实现
思路
1、先获取元素 ---> li的集合,div的集合
2、执行单击事件 ---> 方法
3、每一个元素都需要单击事件 ---> 在执行事件前进行for循环绑定
4、防止一次性循环完,在执行事件前使用闭包解决 ---> 每循环一次执行以下(function(){ 业务逻辑 }())
5、进行单击事件前,再循环一遍,把所有的class去掉,之后再给当前所点击的li赋值class名
6、之后将div放进循环体跟随li的变化即可
var li = document.getElementsByTagName('li'); var div = document.getElementsByTagName('div'); for (var i = 0; i < li.length; i++) { (function(i) { li[i]. = function() { for (var j = 0; j < li.length; j++) { li[j].className = ""; div[j].style.display = "none"; } this.className = "active"; div[i].style.display = "block"; } }(i)) }
一、自定义属性方式
思路
1、先获取元素 ---> li的集合,div的集合
2、执行单击事件 ---> 方法
3、每一个元素都需要单击事件 ---> 在执行事件前进行for循环绑定
4、防止一次性循环完,自定义属性 ---> li[i].index = i;
5、进行单击事件,再循环一遍,把所有的class去掉,之后再给当前所点击的li赋值class名
6、之后将div和当前li的索引相对应
var li = document.getElementsByTagName('li'); var div = document.getElementsByTagName('div'); for (var i = 0; i < li.length; i++) { li[i].index = i; //为每个li添加对应的索引index li[i]. = function() { //循环为每个li添加事件 for (var i = 0; i < li.length; i++) { li[i].className = ''; //循环清空li样式 div[i].style.display = 'none'; //循环隐藏所有div } this.className = 'active'; //当前点击的元素样式变成active div[this.index].style.display = 'block'; //this.index 获取当前li对应的索引 } }
作者:jia林
链接:https://www.jianshu.com/p/5c0d793af9d8
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦