原生js做点击切换方法

前端开发中最常用的交互就是点击切换页面或者切换功能，

主要是通过js控制相关的css属性来实现；

原生js代码的实现步骤：

首先要获取到相对应的元素或集合，给对应的元素添加点击事件；

然后拆分业务，将需要实现的功能切割，依次实现；

以下的代码主要用于切换页面并改变切换的高亮改变

这里实现的方式很多，例如可以直接通过更改元素的display属性和背景属性反复操作，不建议这样做

//切换章节评论

var _swit = document.querySelectorAll('._swit p')

var _kclist = document.querySelectorAll('.kc_list')

for(let i=0;i<_swit.length;i++){

_swit[i].onclick = function(){

//切换高亮

　　　　　　//.item类这里是用来控制高亮的背景和字体颜色的一个css类，这里代码的意思是将默认设置了此类的元素获取到，并移除此类

document.querySelector('.item').classList.remove('item');//将item类移除

　　　　　　//随着点击事件的进行，对当前点击元素给增加item类，表示选中，循环往复点击下一个元素时又会执行上一句代码将此属性取消，并赋给下一个点击的元素

_swit[i].classList.add('item');

//切换内容

　　　　　　//open类用于控制元素的隐藏与显示，实现的逻辑是随着点击事件的开始，页面中会默认显示一个item类控制的选项和一个open类控制的局部页面，

　　　　　　//也是通过类的移除和增加实现

document.querySelector('.open').classList.remove('open');

_kclist[i].classList.add('open')

}

原文地址：https://www.cnblogs.com/jsxly/p/16573690.html