js小练习之选项卡

选项卡（原生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