原生JS实现Tab选项卡各种效果

来源：动视网责编：小采时间：2020-11-27 20:03:19

原生JS实现Tab选项卡各种效果

原生JS实现Tab选项卡各种效果:前一段时间我写了几篇关于css属性的理解和用法方面的文章，今天就不分享css属性了，给大家分享一个我们在实际工作中用到比较多的一个效果——Tab选项卡效果。首先，我们先来看看Tab选项卡效果是什么样子，以QQ新闻为例，有如下效果：当鼠标滑动到相关的标题上

推荐度：

点击下载本文 文档为doc格式

导读原生JS实现Tab选项卡各种效果:前一段时间我写了几篇关于css属性的理解和用法方面的文章，今天就不分享css属性了，给大家分享一个我们在实际工作中用到比较多的一个效果——Tab选项卡效果。首先，我们先来看看Tab选项卡效果是什么样子，以QQ新闻为例，有如下效果：当鼠标滑动到相关的标题上

前一段时间我写了几篇关于css属性的理解和用法方面的文章，今天就不分享css属性了，给大家分享一个我们在实际工作中用到比较多的一个效果——Tab选项卡效果。首先，我们先来看看Tab选项卡效果是什么样子，以QQ新闻为例，有如下效果：

当鼠标滑动到相关的标题上时，标题对应的内容就会出现，这是Tab选项卡的滑动切换效果，Tab选项卡效果还包括延迟切换、自动切换效果。今天就和大家一起来学习下Tab选项卡的这三种效果。

2.三种效果的公共代码

三种效果都是基于以下的公共的html结构和css样式：

在html代码中，使用两个p，分别用于包含标题和内容，标题的个数和内容的个数需要相同。详细的html代码和css代码如下所示：

html代码

<p id="notice" class="notice">
 <p id="notice-title" class="notice-title">
 <ul>
 <li class="select"><a href="#">公告</a></li>
 <li><a href="#">规则</a></li>
 <li><a href="#">论坛</a></li>
 <li><a href="#">安全</a></li>
 <li><a href="#">公益</a></li>
 </ul>
 </p>
 <p id="notice-content" class="notice-content">
 <p class="mod" style="display: block">
 <ul>
 <li>
 <a href="#">张勇：要玩快乐足球</a>
 </li>
 <li>
 <a href="#">阿里2000万驰援灾区</a>
 </li>
 <li>
 <a href="#">旅游宝让你边玩边赚钱</a>
 </li>
 <li>
 <a href="#">多行跟进阿里信用贷款</a>
 </li>
 </ul>
 </p>
 <p class="mod" style="display: none">
 <ul>
 <li>
 <span>
 [
 <a href="">通知</a>
 ]
 </span>
 <a href="#">“滥发”即将换新</a>
 </li>
 <li>
 <span>
 [
 <a href="">通知</a>
 ]
 </span>
 <a href="#">比特币严管啦</a>
 </li>
 <li>
 <span>
 [
 <a href="">通知</a>
 ]
 </span>
 <a href="#">禁发商品名录</a>
 </li>
 <li>
 <span>
 [
 <a href="">通知</a>
 ]
 </span>
 <a href="#">商品熟悉限制</a>
 </li>
 </ul>
 </p>
 <p class="mod" style="display: none">
 <ul>
 <li>
 <span>
 [
 <a href="">聚焦</a>
 ]
 </span>
 <a href="#">金牌卖家再启航</a>
 </li>
 <li>
 <span>
 [
 <a href="">功能</a>
 ]
 </span>
 <a href="#">橱窗规则升级啦</a>
 </li>
 <li>
 <span>
 [
 <a href="">话题</a>
 ]
 </span>
 <a href="#">又爱又恨优惠券</a>
 </li>
 <li>
 <span>
 [
 <a href="">工具</a>
 ]
 </span>
 <a href="#">购后送店铺红包</a>
 </li>
 </ul>
 </p>
 <p class="mod" style="display: none">
 <ul>
 <li>
 <span>
 [
 <a href="">要闻</a>
 ]
 </span>
 <a href="#">年轻干部要摒弃盲目求快的人生哲学</a>
 </li>
 <li>
 <span>
 [
 <a href="">近来好</a>
 ]
 </span>
 <a href="#">都说实体店不行了，可便利店为啥越开越多？</a>
 </li>
 <li>
 <span>
 [
 <a href="">冬奥会</a>
 ]
 </span>
 <a href="#">永远有杯咖啡留给您</a>
 </li>
 <li>
 <span>
 [
 <a href="">总书记</a>
 ]
 </span>
 <a href="#">从高空视角看习总书记的春节足迹 奋进新时代</a>
 </li>
 </ul>
 </p>
 <p class="mod" style="display: none">
 <ul>
 <li>
 <a href="#">走近无声课堂</a>
 </li>
 <li>
 <a href="#">淘宝之行大众评审赢公益</a>
 </li>
 <li>
 <a href="#">爱心品牌联合征集</a>
 </li>
 <li>
 <a href="#">名公益机构淘宝开店攻略</a>
 </li>
 </ul>
 </p>
 </p>
</p>

css代码

*{
 margin: 0;
 padding: 0;
 list-style: none;
 font-size: 12px;
 box-sizing: border-box;
}
.notice{
 width: 302px;
 height: 100px;
 margin: 10px;
 border: 1px solid #eee;
 overflow: hidden;
}
.notice-title{
 height: 26px;
 background: #f7f7f7;
}

.notice-title li{
 float: left;
 width: 60px;
 line-height: 26px;
 text-align: center;
 overflow: hidden;
 background: #fff;
 border-bottom: 1px solid #eee;
 background: #f7f7f7;
}

.notice li a:link,
.notice li a:visited{
 text-decoration: none;
 color: #000;
}

.notice li a:hover{
 color: #f90;
}
.notice-title li.select{
 background: #fff;
 border-bottom-color: #fff;
 border-left: 1px solid #eee;
 border-right: 1px solid #eee;
 font-weight: bold;
}
.notice-title li:first-child.select{
 border-left: none;
}
.notice-title li:last-child.select{
 border-right: none;
}

.notice-content .mod{
 padding: 12px 5px;
}
.notice-content .mod ul{
 width: 300px;
 font-size: 0;
}
.notice-content .mod ul li{
 display: inline-block;
 width: 145px;
 height: 25px;
 line-height: 25px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

3.滑过切换效果原理分析

滑动切换效果，顾名思义，就是当鼠标滑过的时候，显示标题下的内容。需要将当前标题的样式置为选中状态（增加标题选中的css样式，本例中是增加select样式类），同时将该标题下的内容置为显示，即设置样式display:block，而其他标题下的内容设置为隐藏，即设置样式display:none。详细的javascript代码如下所示：

function $(id) {
 return typeof id==='string'? document.getElementById(id):id;
}

//获取鼠标滑过或点击的标签和要切换内容的元素
var titles = $('notice-title').getElementsByTagName('li'),
 ps = $('notice-content').getElementsByTagName('p');
if(titles.length != ps.length){
 return;
}
// 遍历titles下的所有li
for(var i = 0; i < titles.length; i++) {
 // 添加索引
 titles[i].id = i;
 titles[i].onmouseover = function () {
 //清除所有title上的class，将所有的p设置为隐藏
 for(var j=0; j<titles.length; j++) {
 titles[j].className = '';
 ps[j].style.display = 'none';
 }
 //设置当前li为高亮显示
 this.className = 'select';
 ps[this.id].style.display = 'block';
 }
}

如果需要实现点击切换的效果，只需要将onmouseover修改为onclick即可。

在浏览器中的效果如下所示：

当鼠标过相关标题的时候，标题中对应的内容则会显示出来。

4.延迟切换效果原理分析

延迟切换效果，顾名思义，就是鼠标滑动到标题上一定的时间后才显示标题下相关的内容，熟悉javascript的同学知道，我们可以使用setTimeout函数来达到延迟一定的时间，然后再将相关的标题和内容修改为显示与隐藏。其javascript代码与滑动切换效果相差不大，需要我们修改的是首先判断定时器timer是否存在，如果存在，需要清除定时器timer，否则就会出现多个定时器，导致切换效果紊乱，然后将修改标题样式和标题内容的代码放到setTimout函数中。

var timer = null;

var list = $('notice-title').getElementsByTagName('li'),
 ps = $('notice-content').getElementsByTagName('p');
if(list.length != ps.length){
 return;
}
for(var i = 0; i < list.length; i++) {
 list[i].id = i;
 list[i].onmouseover = function () {
 var self = this;
 //如果存在准备执行的定时器，立刻清除，只有当前停留时间大于500ms时才开始执行
 if(timer) {
 clearTimeout(timer);
 timer = null;
 }
 //延迟半秒执行
 timer = setTimeout(function () {
 for(var j = 0; j < list.length; j++) {
 list[j].className = '';
 ps[j].style.display = 'none';
 }
 list[self.id].className = 'select';
 ps[self.id].style.display = 'block';
 }, 500)
 }
}

在浏览器中的效果如下：

当鼠标滑过标题的时候，总是间隔一定的时间后标题内容才出现。

5.自动切换效果原理分析

自动切换效果，顾名思义，就是选项卡可以自动切换。在javascript中，我们可以使用setInterval来实现这种效果。具体步骤如下：

默认第一个标题处于选中状态，第一个标题下的内容显示，同时给每一个标题设定id;
判断定时器是否存在，如果存在，则清除定时器；
利用setInterval函数，每隔一定的时间(本例中设定的时间是2s)执行函数autoPlay，在autoPlay函数中，改变显示标题的下标index，如果下标index的值大于等于标题的个数，则显示下标index的值置为0；
将标题的下标等于显示的下标index值增加selected类，同时将内容的下标等于显示下标index值设置为显示(display:block)，其余的标题内容修改为隐藏(display:none)；

//当前高亮显示的页签索引
var index = 0;
var timer = null;
//获取所有的页签和要切换的内容
var list = $('notice-title').getElementsByTagName('li'),
 ps = $('notice-content').getElementsByTagName('p');

//遍历每一个页签并且给他们绑定事件
for(var i = 0; i < list.length; i++) {
 list[i].id = i;
}
//添加定时器前做一次清除，避免多个定时器导致页面卡顿
if(timer){
 clearInterval(timer);
 timer = null;
}
//添加定时器，改变当前高亮的索引
timer = setInterval(autoPlay, 2000);

function autoPlay() {
 index++;
 if(index >= list.length) {
 index = 0;
 }
 changeOption(index);
}

function changeOption(curIndex) {
 // console.log(curIndex);
 for(var j = 0; j < list.length; j++) {
 list[j].className = '';
 ps[j].style.display = 'none';
 }
 //高亮显示当前页签
 list[curIndex].className = 'select';
 ps[curIndex].style.display = 'block';
 index = curIndex;
}

在浏览器中的效果如下：