Tab(选项卡）是互联网页面特别常见的一种效果，它能以尽量小的空间显示更多的内容，下面我们一起实现一下，最终的效果如下图所示：
工具/原料
1
Sublime编辑器
2
HTML+CSS
3
JavaScript
方法/步骤
1
编写效果中的HTML结构和对应的CSS样式，HTML代码中要特别注意，代码和如下图所示：
2
编写完成后，打开浏览器进行预览，效果如下图所示：
3
添加JavaScript代码，相关注释已经放在了截图中，如下图所示：
4
打开浏览器预览，已经实现了我们需要的功能，如下图所示：
5
下面，我们再用“事件委托”的方法来实现一下同样的效果，对HTML结构进行更改，代码如图所示：
6
更改JavaScript代码，相关注释已经放在了截图中，如下图所示：
7
打开浏览器预览效果，可以实现相同的功能，如图所示：
注意事项
1
事件委托就是利用冒泡原理，将事件添加到父素元或祖先元素上触发执行效果
2
事件委托代码虽多一些，但可以显著提高事件的处理速度，减少内存，提升JS性能