新手接触前端的时候，大多数会依赖Jquery或者其他框架提供的现成组件，来完成功能需求。

但是，这样的弊端就是你无法定制想要的效果，而且加载其他框架的静态资源文件，由于把所有组件和相关库加载进入，会显得臃肿多余。当然，模块化开发时，影响不会太大。

今天，阳光明媚。我给大家带来以下示例，并手把手讲解。

简洁tabs效果

JS选项卡，代码并不多

为了新手更好的理解，我将侧重JS部分。

CSS部分

HTML结构

以上为样式结构。可以看见，非常简单。值得注意的是这里用了.tab-content:not(:first-child)，因为我们需要一个初始值，也就是选项卡的默认选项内容需要显示，而其他的不需要显示。这样做的好处是，无论添加多少个tab和tab-content，第一个总会默认显示。

JS代码

如上为本文重点内容，即JS代码部分，加上括号，一共19行，用显示隐藏的思想进行实现。

原理解析

首先通过document.getElementByClassName()分别获取当前的tab标签和tab内容对象。

这里没有使用document.getElementByID()是因为，我们需要DOM操作获得包含了指定Class的所有元素的集合，而不是单个元素。

接着对所取对象进行遍历，对象的index=i是为了将元素重新排序，方便后面进行判断。

遍历过程中，对每个tab元素加上了点击事件的监听，从而实现隐藏与显示。

当索引相等时，为激活状态，内容显示，其他页面内容隐藏；同时，添加一个名为active的class用以直观强调当前tab和tab内容为选中状态。