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

提起tab选项卡，估计作web开发的小伙伴们都不陌生，这个功能也是一个经常使用功能，今天就带你们一块儿来实现它。

效果图

1、Tab切换类型

• 滑过切换

• 点击切换

• 延迟切换

• 自动切换

基本HTML结构：

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

CSS这里不作概述，请你们自行发挥喽。

2、滑过切换效果

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

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

鼠标滑动切换

2、点击切换效果

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

点击切换效果

3、延迟切换效果

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

延迟切换效果

4、自动切换效果

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

自动切换效果

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

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

自动切换+手动切换

以上代码是通过了函数封装，定时器优化后的，同窗们能够根据本身的思路先实现功能，而后再看哪些是重复的代码，重复的内容是否能够封装成函数。

留个小做业，tab切换的效果能够实现了，轮播图的切换效果是否是本身也能实现呢？动手试试吧，明天揭晓答案。

博客园的前端群：640633433

欢迎你们关注个人微信号公众号，公众号名称：web前端EDU。扫下面的二维码或者收藏下面的二维码关注吧（长按下面的二维码图片、并选择识别图中的二维码）