前端系列-原生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:今天大年初四了,假期很快都要过去了,马上就要进城务工。。。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180219G08EEH00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券