javascript 定时自动切换的选项卡Tab

为了详细讲解“javascript 定时自动切换的选项卡Tab”的完整攻略，我们先来了解一下什么是选项卡Tab。

什么是选项卡Tab

选项卡（Tabs）是一种常见的网站导航方式，能够让用户快速切换不同的内容。选项卡通常用于展示多个内容，每个选项卡对应内容不同，用户可以通过点击选项卡标签来快速切换内容。

实现自动切换的选项卡Tab

实现自动切换的选项卡有多种方式，其中比较常见的方式是使用JavaScript定时器实现自动切换。在JavaScript中，我们可以使用setInterval函数定时调用函数，从而达到定期执行任务的目的。下面是一个简单实现选项卡自动切换的demo：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>定时自动切换的选项卡Tab实现</title>
    <style>
      .tab {
        display: none;
      }
      .active {
        display: block;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="tab-btn active" data-target="tab1">选项卡1</li>
      <li class="tab-btn" data-target="tab2">选项卡2</li>
      <li class="tab-btn" data-target="tab3">选项卡3</li>
    </ul>
    <div class="tab-content">
      <div class="tab active" data-tab="tab1">选项卡1的内容</div>
      <div class="tab" data-tab="tab2">选项卡2的内容</div>
      <div class="tab" data-tab="tab3">选项卡3的内容</div>
    </div>    
    <script>
      var tabBtns = document.querySelectorAll('.tab-btn');
      var tabs = document.querySelectorAll('.tab');
      var index = 0;
      var intervalId = setInterval(function(){
        index = (index + 1) % tabBtns.length;
        setActiveTab(index)
      }, 2000);

      function setActiveTab(index) {
        for(var i = 0; i < tabs.length; i++) {
          if(i === index){
            tabs[i].classList.add('active');
            tabBtns[i].classList.add('active');
          } else {
            tabs[i].classList.remove('active');
            tabBtns[i].classList.remove('active');
          }
        }
      }

      for(var i = 0; i < tabBtns.length; i++) {
        tabBtns[i].addEventListener('click', function(evt){
          var targetId = evt.target.dataset.target;
          for(var i = 0; i < tabs.length; i++) {
            if(tabs[i].dataset.tab === targetId) {
              setActiveTab(i);
              clearInterval(intervalId);
              intervalId = setInterval(function(){
                index = (index + 1) % tabBtns.length;
                setActiveTab(index)
              }, 2000);             
              break;
            }
          }
        });
      }
    </script>
  </body>
</html>

以上是一个使用JavaScript实现自动切换的选项卡的完整示例。在这个示例中，我们使用了setInterval函数每隔2秒自动切换选项卡。同时，这个示例还允许用户手动点击切换选项卡，当用户手动切换时，定时器将被清除，等待用户操作完成后重新激活。

示范说明

为了更好地展示这个自动切换的选项卡示例的使用场景，我们可以在它基础上实现两个不同的需求：

例1：自动切换轮播图

下面是一个使用自动切换的选项卡实现自动切换轮播图的演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>自动切换轮播图</title>
    <style>
      .tab-img {
        display: none;
      }
      .active {
        display: block;
      }
      .tab-container {
        position: relative;
        width: 500px;
        height: 300px;
        margin: 0 auto;
      }
      .tab-nav {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .tab-nav li {
        display: inline-block;
        margin-right: 12px;
      }
      .tab-nav li:last-child {
        margin-right: 0;
      }
      .tab-nav a {
        display: block;
        width: 16px;
        height: 16px;
        background-color: #1abc9c;
        border-radius: 50%;
        text-indent: -9999px;
      }
      .tab-nav a.active {
        background-color: #3498db;
      }
      .tab-prev, .tab-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 24px;
        z-index: 1;
        color: #fff;
        cursor: pointer;
        opacity: 0.8;
      }
      .tab-prev {
        left: 0;
      }
      .tab-next {
        right: 0;
      }
      .tab-run {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="tab-container">
      <div class="tab-content">
        <img class="tab-img active" data-tab="tab1" src="http://placehold.it/500x300/2980b9/ffffff?text=tab1">
        <img class="tab-img" data-tab="tab2" src="http://placehold.it/500x300/2ecc71/ffffff?text=tab2">
        <img class="tab-img" data-tab="tab3" src="http://placehold.it/500x300/f1c40f/ffffff?text=tab3">
        <img class="tab-img" data-tab="tab4" src="http://placehold.it/500x300/e74c3c/ffffff?text=tab4">
      </div>   
      <ul class="tab-nav">
        <li><a class="active" href="#" data-target="tab1">1</a></li>
        <li><a href="#" data-target="tab2">2</a></li>
        <li><a href="#" data-target="tab3">3</a></li>
        <li><a href="#" data-target="tab4">4</a></li>
      </ul> 
      <div class="tab-prev">&#10094;</div>
      <div class="tab-next">&#10095;</div>
      <div class="tab-run"></div>
    </div>
    <script>
      var tabNav = document.querySelectorAll('.tab-nav a');
      var tabImgs = document.querySelectorAll('.tab-img');
      var tabBtnPrev = document.querySelector('.tab-prev');
      var tabBtnNext = document.querySelector('.tab-next');
      var tabRun = document.querySelector('.tab-run');
      var index = 0;
      var intervalId = setInterval(function(){
        index = (index + 1) % tabNav.length;
        setActiveTab(index)
      }, 3000);

      function setActiveTab(index) {
        for(var i = 0; i < tabImgs.length; i++) {
          if(i === index){
            tabImgs[i].classList.add('active');
            tabNav[i].classList.add('active');
          } else {
            tabImgs[i].classList.remove('active');
            tabNav[i].classList.remove('active');
          }
        }
      }

      for(var i = 0; i < tabNav.length; i++) {
        tabNav[i].addEventListener('click', function(evt){
          var targetId = evt.target.dataset.target;
          for(var i = 0; i < tabImgs.length; i++) {
            if(tabImgs[i].dataset.tab === targetId) {
              setActiveTab(i);
              clearInterval(intervalId);
              intervalId = setInterval(function(){
                index = (index + 1) % tabNav.length;
                setActiveTab(index)
              }, 3000);             
              break;
            }
          }
        });
      }

      tabBtnPrev.addEventListener('click', function(){
        index = (index - 1 + tabNav.length) % tabNav.length;
        setActiveTab(index);
      });

      tabBtnNext.addEventListener('click', function(){
        index = (index + 1) % tabNav.length;
        setActiveTab(index);
      });

      tabRun.addEventListener('mouseenter', function(){
        clearInterval(intervalId);
      });

      tabRun.addEventListener('mouseleave', function(){
        intervalId = setInterval(function(){
          index = (index + 1) % tabNav.length;
          setActiveTab(index)
        }, 3000);
      });
    </script>
  </body>
</html>

在这个来源于选项卡的自动切换演示中，我们以轮播图的形式展示了多个图片，自动循环播放，用户也可以手动进行上下翻页操作。

例2：自动切换新闻列表

下面是一个用自动切换的选项卡实现自动切换新闻列表的演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>自动切换新闻列表</title>
    <style>
        .active {
            color: #f00;
        }
        ul.news {
            list-style: none;
            padding: 0;
        }
        ul.news li {
            line-height: 30px;
        }
    </style>
  </head>
  <body>
    <ul class="news">
      <li class="active">新闻1</li>
      <li>新闻2</li>
      <li>新闻3</li>
      <li>新闻4</li>
      <li>新闻5</li>
    </ul>
    <script>
      var newsList = document.querySelector('.news');
      var newsItems = document.querySelectorAll('.news li');
      var index = 0;
      var intervalId = setInterval(function(){
        index = (index + 1) % newsItems.length;
        setActiveTab(index)
      }, 2000);

      function setActiveTab(index) {
        for(var i = 0; i < newsItems.length; i++) {
          if(i === index){
            newsItems[i].classList.add('active');
          } else {
            newsItems[i].classList.remove('active');
          }
        }
      }    
    </script>
  </body>
</html>

以上示例是一个简单的自动切换新闻列表的demo，每隔2秒自动切换到下一条新闻，用户也可以手动点击切换。在实际开发过程中，我们可以把这个简单的demo拓展成一个更加完整的新闻内容展示界面。

总之，基于选项卡的JavaScript自动切换效果可以应用于很多不同的场景，需要根据实际需求进行具体实现。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript 定时自动切换的选项卡Tab - Python技术站