原生js做点击切换方法

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

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

 

原生js代码的实现步骤：

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

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

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

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

这里主要使用了原型里的一个属性，通过移除和增加类来实现的，在classList里有remove和add方法

 //切换章节评论

        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')

               

                }

            }

###在平时的前端页面实现时，要合理的使用选择器，将部分可能涉及到需要切换或者交互的属性单独用一个选择器来写，将其赋给指定的元素即可，这样方便js代码书写时更好的处理