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

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

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

2.三种效果的公共代码

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

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

html代码

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

登录后复制

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下的所有lifor(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) {    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;}

登录后复制

在浏览器中的效果如下：

可以发现，选项卡可以间隔一定的时间自动切换。

6.写在最后

好了，今天给大家分享了Tab选项卡的三种切换效果，希望给大家起一个热身作用，掌握了Tab选项卡的原理，其滑动切换、延迟切换、自动切换的效果比较容易实现。

相关推荐：

jQuery移动端Tab选项卡效果实现方法

JavaScript插件Tab选项卡详解

关于JavaScript插件Tab选项卡效果分享

以上就是原生JS实现Tab选项卡各种效果的详细内容，更多请关注【创想鸟】其它相关文章！