选项卡(原生js)
获取dom节点
通过
document.quserySelectorAll()
获取dom,通过该方式获取,他获取到的是一个节点列表,通常我们称之为伪数组;let是es6的东西,有局部作用域
let lists=document.querySelectorAll('.tab .list');//获取tab操作的内容
let cLists=document.querySelectorAll('.cont .list');//获取展示内容
排他思想
本文是通过类名来控制,先把其他人干掉(移除类名),然后再展现自己(添加类名)
对dom节点的操作
classList
是只读属性,classList
属性返回元素类名,该属性用于在元素中添加, 移除及切换 CSS 类.
添加(.add()
)多个类时,使用逗号隔开;若指定类名已存在, 则不添加;
移除(.remove()
)多个类时,使用逗号隔开;若指定类名不存在, 不会报错.
箭头函数(es6)写法方便,无this
指向
lists.forEach((val,index)=>{
val.onclick=function(){
lists.forEach((val,index)=>{
val.classList.remove('active');
cLists[index].classList.remove('active');
})
this.classList.add('active');
cLists[index].classList.add('active');
}
})
选项卡(jQuery版)
链式写法,就是可以连在一起写,注意这里获取dom元素一定要写
$
,也用到了排他思想,和原生js写的逻辑一样,只是写法更加简单
$(function() {
$('.tab .list').each(function(index,val){
$(val).click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.cont.list').eq($(this).index()).addClass('active').siblings().removeClass('active');
})
})
})
相对于原生js,jQuery写法简直不要太爽
效果展示
QQ录屏20220410111732