Tab栏切换

方法1：双重forEach（双重for循环）写法（相对简化）：

直接上代码：

        其中 items是左边标题栏（详情见效果图，tab栏在上方的同理）的class名，所有标题栏命同样的名字（具体使用div+p还是ul+li等组合代码看个人习惯）

       qhs是右边切换栏的（详情见效果图，tab栏在上方的同理）的class名，所有切换栏命同样的名字（一般使用div，因为面板较大）

前面声明代码是：

    var items = document.querySelectorAll('.item')

    var qhs = document.querySelectorAll('.qh')

 这是效果图：

 

 方法2：自定义变量写法：

前面的声明代码依旧为：

    var items = document.querySelectorAll('.item')

    var qhs = document.querySelectorAll('.qh')

具体代码如图：

        效果图同上，只是写法上略有区别，这里使用到了自定义变量，即setAttribute()和getAttribute()，相对于上一个方法比较难于理解，但是对于学习者可以建立更强的逻辑性。

总结：

        总的来说两种方法换汤不换药，都是结合了排他思想，即先“去掉其他人”，再“留下自己人”，触发事件时先把不需要的样式清空，再给自己赋予需要的样式。