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

效果图

一、Tab切换类型

  • 滑过切换
  • 点击切换
  • 延迟切换
  • 自动切换

基本HTML结构：

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

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

二、滑过切换效果

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

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

鼠标滑动切换

二、点击切换效果

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

点击切换效果

三、延迟切换效果

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

延迟切换效果

四、自动切换效果

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

自动切换效果

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

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

自动切换+手动切换

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