js实现tab栏切换

实现思路： 
（1）整个tab栏是由2个div模块组成，分别是头部选项栏和中间内容模块（蓝色框）。

（2）头部选项栏点击其中任意一个，当前点击的一栏底色及字体颜色发生改变，其余不变。用排他思想实现。

（3）用for循环为头部选项栏所有元素绑定点击事件。

（4）中间的内容模块会跟随选项栏变化，因此显示隐藏的模块要放在点击事件的里边。且要满足：中间模块显示的内容要和上面的选项栏一一对应。

（5）最终达到的效果为：当我们点击头部选项栏，中间内容模块会显示对应的图片，其余的图片则会隐藏(排他思想）。

需要注意的点：1、我们一开始是将中间内容模块隐藏，此时需要在中间内容模块中添加一个展示类，使得中间模块在默认状态下内容不为空。2、由于我们采用了document.querySelectorAll()来获取元素，因此获取到的头部选项栏和中间内容模块的所有元素，类型是下标为0开始的列表，由此来实现一一对应匹配。

代码示例：

       
    
        
        
        
        
        
    
    
    
        

            

                

                    
第一张
                    
第二张
                    
第三张
                    
第四张
                
            

            

                
 //默认展示页面