美文网首页
用js实现tab切换

用js实现tab切换

作者: 周周很可爱 | 来源:发表于2019-10-15 22:00 被阅读0次

今天给大家讲一下简单的type切换(随便写了一下,效果比较low)


屏幕快照 2019-10-15 下午9.19.16.png
屏幕快照 2019-10-15 下午9.19.28.png

当我点击机票的时候会切换到1111,点击高铁票的时候会切换到3333,
那么该如何做呢;
话不多说,上代码

  var leftul = document.querySelectorAll('.box .left-ul li');//获取左边ul下所有的li
    var righttul = document.querySelectorAll('.box .right-ul li')//获取右边ul下所有的li
    for (var i = 0; i < leftul.length; i++) {//循环ul
        leftul[i].ind = i;//留下标记,保存下标
        leftul[i].onclick = function () {//给leftul下的li绑定点击事件
            for (var j = 0; j < righttul.length; j++) {//遍历所有li

                leftul[j].className = ""    ; //干掉所有li的类名active1,
                righttul[j].className = ""    ;   // 干掉所有li的类名active2
                        
            }
            leftul[this.ind].className="active1"//给当前li添加一个active1类名
            righttul[this.ind].className="active2"

            console.log(this.ind);
        }
    }

好啦,简单的type切换就完成了,如果有什么不对的地方,还请大家多多指出,谢谢大家!!!

相关文章

网友评论

      本文标题:用js实现tab切换

      本文链接:https://www.haomeiwen.com/subject/dksemctx.html