tab选卡切换效果

效果图

一、Tab切换类型

滑过切换

点击切换

延迟切换

自动切换

基本HTML结构：

JavaScript原生实现Tab选项卡各种切换效果

这里要注意，标签的数量和要切换显示的内容div数目要一致。

CSS这里不做概述，请大家自行发挥喽。

二、滑过切换效果

鼠标滑过的第N个元素添加class为select样式，其余节点移除select样式。

同理，下面的notice-con中的第N个元素显示，其余隐藏。

JavaScript原生实现Tab选项卡各种切换效果

鼠标滑动切换

二、点击切换效果

只需要将上面的onmouseover事件更改为click事件即可，就实现了点击的时候切换的效果：

JavaScript原生实现Tab选项卡各种切换效果

点击切换效果

三、延迟切换效果

其实所谓的延迟就是增加一个定时器：setTimeout来实现延迟效果。

JavaScript原生实现Tab选项卡各种切换效果

延迟切换效果

四、自动切换效果

其实所谓的自动切换就是增加一个定时器：setInterval来不断的改变li的索引。

JavaScript原生实现Tab选项卡各种切换效果

自动切换效果

四、自动切换的基础上加入手动切换

自动切换的过程中，当鼠标滑过某个li的时候，也能实现切换的效果，当鼠标离开的时候还能继续自动切换：

JavaScript原生实现Tab选项卡各种切换效果
自动切换+手动切换

以上代码是经过了函数封装，定时器优化后的，同学们可以根据自己的思路先实现功能，然后再看哪些是重复的代码，重复的内容是否可以封装成函数。