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

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

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

2.三种效果的公共代码

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

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

html代码

<p>
  </p><p>
    </p>

      
• 公告
      
• 规则
      
• 论坛
      
• 安全
      
• 公益
    

        
•           张勇：要玩快乐足球         
        
•           阿里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下的所有li
for(var i = 0; i <p>如果需要实现<strong>点击切换</strong>的效果，只需要将<code>onmouseover</code>修改为<code>onclick</code>即可。</p><p>在浏览器中的效果如下所示：</p><p><span class="img-wrap"><img src="https://img.php.cn/upload/article/000/054/025/947a04b099e04a1fa765b4c4cc7070ad-2.gif"></span></p><p>当鼠标过相关标题的时候，标题中对应的内容则会显示出来。</p><h2>4.延迟切换效果原理分析</h2><p><strong>延迟切换效果</strong>，顾名思义，就是鼠标滑动到标题上一定的时间后才显示标题下相关的内容，熟悉<code>javascript</code>的同学知道，我们可以使用<code>setTimeout</code>函数来达到延迟一定的时间，然后再将相关的标题和内容修改为显示与隐藏。其<code>javascript</code>代码与<strong>滑动切换效果</strong>相差不大，需要我们修改的是首先判断定时器<code>timer</code>是否存在，如果存在，需要清除定时器<code>timer</code>，否则就会出现多个定时器，导致切换效果紊乱，然后将修改标题样式和标题内容的代码放到<code>setTimout</code>函数中。</p><pre class="brush:php;toolbar:false">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 <p>在浏览器中的效果如下：</p><p><span class="img-wrap"><img src="https://img.php.cn/upload/article/000/054/025/947a04b099e04a1fa765b4c4cc7070ad-3.gif"></span></p><p>当鼠标滑过标题的时候，总是间隔一定的时间后标题内容才出现。</p><h2>5.自动切换效果原理分析</h2><p><strong>自动切换效果</strong>，顾名思义，就是选项卡可以自动切换。在<code>javascript</code>中，我们可以使用<code>setInterval</code>来实现这种效果。具体步骤如下：</p><ol class=" list-paddingleft-2"><li><p>默认第一个标题处于选中状态，第一个标题下的内容显示，同时给每一个标题设定id;</p></li><li><p>判断定时器是否存在，如果存在，则清除定时器；</p></li><li><p>利用<code>setInterval</code>函数，每隔一定的时间(本例中设定的时间是2s)执行函数autoPlay，在autoPlay函数中，改变显示标题的下标<code>index</code>，如果下标<code>index</code>的值大于等于标题的个数，则显示下标<code>index</code>的值置为0；</p></li><li><p>将标题的下标等于显示的下标<code>index</code>值增加<code>selected</code>类，同时将内容的下标等于显示下标<code>index</code>值设置为显示(<code>display:block</code>)，其余的标题内容修改为隐藏(<code>display:none</code>)；</p></li></ol><pre class="brush:php;toolbar:false">//当前高亮显示的页签索引
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 <p>在浏览器中的效果如下：</p><p><span class="img-wrap"><img src="https://img.php.cn/upload/article/000/054/025/3b9682f9b668eab4890ff83825e0f869-4.gif"></span></p><p>可以发现，选项卡可以间隔一定的时间自动切换。</p><h2>6.写在最后</h2><p>好了，今天给大家分享了Tab选项卡的三种切换效果，希望给大家起一个热身作用，掌握了Tab选项卡的原理，其滑动切换、延迟切换、自动切换的效果比较容易实现。</p><p>相关推荐：<br></p><p><a href="http://www.php.cn/js-tutorial-385400.html" target="_self">jQuery移动端Tab选项卡效果实现方法</a></p><p><a href="http://www.php.cn/js-tutorial-385201.html" target="_self">JavaScript插件Tab选项卡详解</a></p><p><a href="http://www.php.cn/js-tutorial-382851.html" target="_self">关于JavaScript插件Tab选项卡效果分享</a></p><p class="comments-box-content"><br></p>