html如何实现选项卡切换思路,Tab选项卡切换完整思路及实现，值得珍藏

原标题：Tab选项卡切换完整思路及实现，值得珍藏

这篇文章是从微信上转载过来的，原文作者是“Java实例解析”，文章内容很棒，只是这个作者可能是一时看不到效果，所以没更新几篇就放弃了，让人惋惜。

今天要推荐给大家的这个js动画效果，基本上每个网站都会出现，就是tab选项卡的切换效果。

这个效果如果使用jQuery这些框架的话，写起来就很方便，但是，为了提高我们的写原生js的能力，所以我一般都会说用原生js来写，如果大家会js框架的话，也可以学着去用框架写。

今天我们要展示的效果图如下：

这是一个可以自动和手动切换的tab效果，实现这个效果的关键点是索引的用法和了解setInterval贺clearInterval函数。

我们首先实现手动切换的效果。

在开始代码之前，我们先理一下思路。当鼠标滑过其中一个标题时，循环取消所有标题的高亮并隐藏所有标题对应的内容，然后给我们滑过的那个标题高亮并显示对应内容。

首先是HTML：

然后是css部分：(由于css不是我们要讲的重点，大家可以直接复制)

@charset "utf-8";

*{margin:0; padding:0; list-style:none; font-size:12px;}

.notice{width:298px; height:98px; margin:10px;}

.notice_tit{height:27px; position:relative;}

.notice_tit ul{position: absolute; width:381px; left:-1px;}

.notice_tit li{float:left; width:58px; height: 26px; line-height: 26px; text-align: center; overflow: hidden; background-color: #fff; padding:0 1px; background-color: #eee; border-bottom:1px solid #eee;}

.notice_tit li.select{background-color: #fff; border-bottom-color: #fff; border-left: 1px solid #eee; border-right:1px solid #eee; padding:0; font-weight: bold;}

.notice_tit li a:link,

.notice_tit li a:visited{text-decoration: none; color:#000;}

.notice_tit li a:hover{color:#f90;}

/*内容部分*/

.notice_con .mod{margin:10px 10px 10px 19px; display: none;}

.notice_con .mod ul li{float:left; width:134px; height:25px; overflow: hidden;}

好了，接下来是js的实现，首先先来封装一个id选择器，然后写出事件

先获取五个标题和内容。并且判断一下，如果标题和内容的数量不对等的话，就取消退出tab切换效果。

获取到所有标题之后，我们就可以对所有标题添加一个鼠标滑过事件，使用for循环来添加。

接着我们就可以在鼠标滑过事件里添加我们刚才的思路了：先循环将所有标题和内容取消高亮和隐藏，再单独给滑过的标题设置高亮和显示对应的内容。

以上，就实现了鼠标滑过时的切换效果了。这是最简单的tab切换效果。整个代码块：

接下来我们可以来个小小的拓展，实现延迟切换效果。就是当鼠标滑过标题时，过了500毫秒(可以自己设定)之后，再执行标题的高亮和对应内容的显示。

这里要使用到setTimeout和clearTimeout函数了。

我们把上面的onmouseover事件里的执行代码写在setTimeout函数里，在500毫秒后执行，并在循环外新增一个变量timer，把这个函数赋给这个变量。

接下来我们发现，在setTimeout的函数里，执行alert(this.id)后弹出undefined，这有两个原因，一是this不是我们要找的当前对象，二是没存在id这个属性。最后结果是由于setTimeout方法是window对象的方法，所以在里面的this指向的就是window对象。因此为了让setTimeout函数里的this指向标题，我们可以在setTimeout函数外通过变量赋值来实现；

此外，我们还需要在指向setTimeout函数之前，先清除定时器，不然当鼠标滑过标题过快时，会累积定时器函数的执行。

这样就可以实现tab延时切换了，整个代码如下：

接下去就是实现自动切换和手动切换的效果了，并且要封装函数，对代码进行优化，大家先把以上的效果熟悉，下节我们继续。祝大家周末愉快哈。返回搜狐，查看更多

责任编辑：