打开这里，重新加载你的选项卡世界

开发工具与关键技术：VisualStudio MVC
作者：老龙
撰写时间：2019/5/18

选项卡是项目中使用频率很高的一个功能点，然而有太多的插件能够利用简单的几句代码实现选项卡的功能。这虽然是提高了写代码的效率，但过多地使用插件会对插件产生严重的依赖性，这对于初学者来说是非常不利的。在学会使用插件之前更需要了解一下功能的的源代码，这有利于以后的理解。接下来介绍一下怎么用JS实现tab选项卡的切换。

实现效果一：点击切换
选项卡的HTML样式会将头部于内容区分开来，而头部的内容于内容区的内容一般都是用

标签来搭建，下面是一个HTML选项卡的实例。在HTML中我们设置了一个select的类，它的功能只是改变当前点击的头部选项的样式，将点中的选项与其他没有点击的选项区分开来，有selec这个类的内容区显示在页面中，至于其他的内容区就暂时先隐藏起来。

JS部分：

1. 选项卡的功能是点击头部的的选项实现内容的切换，所以JS的部分首先是在页面加载事件里声明变量Lis和Divs来获取到头部的li标签和该标签对应的div内容。

2. 通过for循环头部选项Lis的长度，并按顺序给头部选项Lis添加ID，再在头部选项的点击事件里触发一个名为changeOption的方法，

3. changeOption方法是根据当前点击的头部选项决定对应的内容区的显示与隐藏。在changeOption的方法体里也用到了for循环，这个循环是让所有不包含select这个类的选项的内容区隐藏，反之则显示出来。
   
   实现效果二：鼠标移入切换

下面效果的HTML与上面的HTML都相同，而这个效果的JS与第一个效果的JS基本相同，只是将第一个for循环的onclick改为了onmouseover。

实现效果三：间隔时间后自动切换

实现这个效果的JS跟前面效果在JS方面就有比较大的差别，而且要用到计时器这个JS的神器。

1. 首先我们需要声明一个index=0的变量，它是用来记录当前拥有select这个类的选项的位置，促进循环的进行，防止跳到最后一个选项时卡在那里不动。

2. 因为选项卡里选项的数量必须要与内容区的数量一致，即一个选项对应一个内容，所以要对Lis和Divs的长度进行判断，当长度不一致时直接返回，不再执行下面的代码。

3. 声明变量timer=null用来记录计时器的初始值。

4. 建立一个计时器，让它每隔两秒后调用一次名称为autoPlay的方法。

5. autoPlay方法每调用一次index就加一，用来记录选项的数量，因为要防止循环卡死。所以我们判断当选项Lis的长度大于内容区Divs的长度时让index=0，即回到第一个选项重新进行循环。然后在autoPlay的方法里调用再调用一个名为changeOption的方法。

6. changeOption方法的内容是通过for循环选项Lis的长度，当该选项没有select这个类时，内容区隐藏，反之则显示。而且changeOption的方法里还带有一个参数用来记录当前循环的位置，我们让它与之前声明的index相等，这样就可以让循环的正常地进行起来。