JS实现简单Tab栏切换案例_javascript技巧

本文实例为大家分享了JS实现简单Tab栏切换的具体代码，供大家参考，具体内容如下

要求：当鼠标点击上面相应的选项卡（tab），下面页面的内容也随之而改变。

结构分析：

全部的内容都放到一个大的盒子里面，盒子里面又可以分为上面和下面两个盒子。

上面的盒子放了 5个li，装着5个小的选项卡，默认会有一个被选中；

下面的盒子也包含了 5个 div 模块，模块内容与上面的选项一一对应，当前默认的只有第一个 div会被显示出来。

实现思路：

点击切换选项卡部分

Tab 栏切换有2个大的 模块

1、上面模块的选项卡，点击某一个，改变当前样式，底色变为红色，字体颜色变为白色。而其他的选项卡样式不发生改变（排他思想）

通过修改类名的方式实现。

2、下面模块的内容，会随着上面的选项卡变化。所以下面模块变化写到点击事件里面。

规律：下面的模块显示的内容和上面选项卡一一对应，相匹配。

核心思路：给上面模块里面所有的 li 添加自定义属性，属性值从 0 开始作为索引号。

排他思想：通过 for循环遍历数组中的元素，进入循环之后首先消除所有部分的样式，接着再为所点击的当前部分添加样式。

通过 setAttribute（name，value）创建自定义属性，name指的是为元素设置的自定义属性，value为自定义属性添加的属性值。

通过 getAttribute（name）获取元素的属性。name是属性的名称。

默认第一个选项卡对应的下面模块是显示的，需要在添加行内样式（style='display:block'）因为CSS行内样式的优先级高于外部样式，会优先显示。

而（items[index].style.display = 'block';）这一句也相当于创建了行内样式。

实现代码：

    
    
    



        

            

                
个性推荐
                
歌单
                
主播电台
                
排行榜
                
歌手
            
        
    

        
每日歌曲推荐
        
精品歌单倾心推荐，给最懂音乐的你
        
上瘾烟嗓情感之声
        
新歌飙升榜
        
歌手排行榜
    




 

实现效果：

点击其它选项