怎么用javascript实现选项卡切换效果

在网页制作过程中，我们经常会用到选项卡切换效果，它能够让我们的网页在交互和布局上都能得到提升，今天小编就来给大家详细讲一下如何实现选项卡切换效果。

工具/原料

网页编辑器dreamweaver

javascript中的getElementById和getElementsByTagName方法

一、选项卡切换的原理

1、在布局好选项卡的HTML结构后，我们可以看的出来，选项卡实际上是三个选项卡标头和三个对应的版块，如下图，是三个标头分别是教育，娱乐，汽车，当我们单击教育时，教育那个选项卡标头的背景会懈吡赜痖变成激活状白色，下面的的三个DIV形成的版块只会显示第一个教育的内容。当我们单击娱乐时，娱乐那个选项卡标头的背景会变成激活状白色，下面的的三个DIV形成的版块只会显示第二个娱乐的内容。当我们单击汽车时，汽车那个选项卡标头的背景会变成激活状白色，下面的的三个DIV形成的版块只会显示第三个汽车的内容。

二、制作过程

1、制作HTML结构框架

3、输写javascript代码，对选项卡标头分别注册相应的事件