前端系列-原生JS实现Tab选项卡滑动、延迟、自动切换效果

1.写在前面

前一段时间我写了几篇关于css属性的理解和用法方面的文章，今天就不分享css属性了，给大家分享一个我们在实际工作中用到比较多的一个效果——Tab选项卡效果。首先，我们先来看看Tab选项卡效果是什么样子，以QQ新闻为例，有如下效果：

当鼠标滑动到相关的标题上时，标题对应的内容就会出现，这是Tab选项卡的滑动切换效果，Tab选项卡效果还包括延迟切换、自动切换效果。今天就和大家一起来学习下Tab选项卡的这三种效果。

2、三种效果的公共代码

三种效果都是基于以下的公共的html结构和css样式：

在html代码中，使用两个div，分别用于包含标题和内容，标题的个数和内容的个数需要相同。详细的html代码和css代码如下所示：

html代码

css代码

3.滑过切换效果原理分析

滑动切换效果，顾名思义，就是当鼠标滑过的时候，显示标题下的内容。需要将当前标题的样式置为选中状态（增加标题选中的css样式，本例中是增加样式类），同时将该标题下的内容置为显示，即设置样式，而其他标题下的内容设置为隐藏，即设置样式。详细的代码如下所示：

如果需要实现点击切换的效果，只需要将修改为即可。

在浏览器中的效果如下所示：

当鼠标过相关标题的时候，标题中对应的内容则会显示出来。

4.延迟切换效果原理分析

延迟切换效果，顾名思义，就是鼠标滑动到标题上一定的时间后才显示标题下相关的内容，熟悉的同学知道，我们可以使用函数来达到延迟一定的时间，然后再将相关的标题和内容修改为显示与隐藏。其代码与滑动切换效果相差不大，需要我们修改的是首先判断定时器是否存在，如果存在，需要清除定时器，否则就会出现多个定时器，导致切换效果紊乱，然后将修改标题样式和标题内容的代码放到函数中。

在浏览器中的效果如下：

当鼠标滑过标题的时候，总是间隔一定的时间后标题内容才出现。

5.自动切换效果原理分析

自动切换效果，顾名思义，就是选项卡可以自动切换。在中，我们可以使用来实现这种效果。具体步骤如下：

默认第一个标题处于选中状态，第一个标题下的内容显示，同时给每一个标题设定id;

判断定时器是否存在，如果存在，则清除定时器；

利用函数，每隔一定的时间(本例中设定的时间是2s)执行函数autoPlay，在autoPlay函数中，改变显示标题的下标，如果下标的值大于等于标题的个数，则显示下标的值置为0；

将标题的下标等于显示的下标值增加类，同时将内容的下标等于显示下标值设置为显示()，其余的标题内容修改为隐藏()；

在浏览器中的效果如下：

可以发现，选项卡可以间隔一定的时间自动切换。

6.写在最后

好了，今天给大家分享了Tab选项卡的三种切换效果，希望给大家起一个热身作用，掌握了Tab选项卡的原理，其滑动切换、延迟切换、自动切换的效果比较容易实现。这里主要是做

如果发现有的地方写错了或者写的不好，可以给我留言，欢迎大家指点！我们一起进步！感谢阅读。

ps：今天大年初四了，假期很快都要过去了，马上就要进城务工。。。