这是最终效果

标签页切换演示

接下来是详细讲解。非常简单！

首先定义3个按钮

它们对应的样式

接下来定义点击标签后弹出的内容

每个标签对应的内容

标签内容的样式，应用这个样式后标签内容是不可见的，因为display:none;

接下来是处理点击事件，关键的地方来了

思路：

第一步，获取所有便签内容，并将其设置不可见。（这里有更好的实现方法，但是我们暂时先这样做）

第二步，获取所有按钮，并将其状态设置为未激活，激活的按钮和未激活的按钮表现在背景颜色上，在代码上表现就是给按钮的类名加上" active"或者删掉" active"。

active的css代码

第三步，就是通过传进来的fruitName，使用document.getElementById()，获取到相应的节点，并将其设置为可见。

第四步，把当前被点击的按钮的状态设置为激活状态，这里我们可以通过参数evt。通过.currentTarget获取到被点击的按钮，然后给类名加上" active"。

本教程用到的全部javascript代码

我们还可以让鼠标移动到按钮上面时改变它的背景颜色

本篇教程结束，喜欢的读者赶紧动手试试吧，遇到问题的读者也可以在下方留言，火蛙都会尽最大努力帮你解决问题。如果你喜欢我的教程，那么赶紧订阅吧。下次更精彩哟