JS实现简单Tab栏切换案例

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

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

结构分析：

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

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

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

实现思路：

点击切换选项卡部分

tab 栏切换有2个大的 模块

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

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

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

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

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

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

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

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

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

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

实现代码：

实现效果：

点击其它选项

以上就是本文的全部内容，希垂询的意思望对大家的学习有所帮助，也希jdtab望大家多多支持www.887551.com。