cari

Rumah >hujung hadapan web >tutorial js >原生JS实现Tab选项卡各种效果

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

小云云
小云云asal
2018-02-23 14:01:592695semak imbas

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

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

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

2.三种效果的公共代码

三种效果都是基于以下的公共的html结构和css样式：
原生JS实现Tab选项卡各种效果

在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 = &#39;&#39;;
      ps[j].style.display = &#39;none&#39;;
    }
    //设置当前li为高亮显示
    this.className = &#39;select&#39;;
    ps[this.id].style.display = &#39;block&#39;;
  }
}

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

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

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

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

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

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

var timer = null;

var list = $(&#39;notice-title&#39;).getElementsByTagName(&#39;li&#39;),
    ps = $(&#39;notice-content&#39;).getElementsByTagName(&#39;p&#39;);
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 = &#39;&#39;;
        ps[j].style.display = &#39;none&#39;;
      }
      list[self.id].className = &#39;select&#39;;
      ps[self.id].style.display = &#39;block&#39;;
    }, 500)
  }
}

在浏览器中的效果如下：

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

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

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

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

  1. 默认第一个标题处于选中状态，第一个标题下的内容显示，同时给每一个标题设定id;

  2. 判断定时器是否存在，如果存在，则清除定时器；

  3. 利用setInterval函数，每隔一定的时间(本例中设定的时间是2s)执行函数autoPlay，在autoPlay函数中，改变显示标题的下标index，如果下标index的值大于等于标题的个数，则显示下标index的值置为0；

  4. 将标题的下标等于显示的下标index值增加selected类，同时将内容的下标等于显示下标index值设置为显示(display:block)，其余的标题内容修改为隐藏(display:none)；

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

//遍历每一个页签并且给他们绑定事件
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;
}

在浏览器中的效果如下：

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

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

6.写在最后

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

相关推荐：

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

JavaScript插件Tab选项卡详解

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


Atas ialah kandungan terperinci 原生JS实现Tab选项卡各种效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery css html select JS display
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：express路由管理的几种自动化方法分享Artikel seterusnya：js组合设计模式详解

Artikel berkaitan

Lihat lagi