第18车厢-动ㄘ动ㄘ！tab页签切换+轮播应用篇

本篇介绍透过bootstrap4直接使用tab切换功能，并且实作tab切换自动循环播放

我们在昨篇<第17车厢-超实用！tab页签切换:data-应用篇>已经介绍过tab页签切换手刻版，但其实套用bootstrap整个快速很多，所以我们这篇tab切换功能就直接使用bootstrap4，另外分享一下结合自动拨放这个奇怪的需求...

请问可以有tab切换，并自动每几秒自动切换吗?

▼完成图如下

观念

如果你有看<第17车厢-超实用！tab页签切换:data-应用篇>就知道实现tab切换的观念是，藉由抓tab标题的data-*内容，来找到对应的tab内容的id，而後做显示/隐藏

那bootstrap4切换呢则是根据<a href="#某某id"> 来对应 tab内容中的id<div class="tab-pane ...." id="pills-某某id"，例如:对应则是<div class="tab-pane..." id="pills-home"`，所以这两个名称要一致喔!

起手式(CDN)[email protected]

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

//<!-- Bootstrap JS -->也可以改成这样喔 (二择一)
<!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
-->

HTML

<div class="container p-3 bg-light">
  <h1>每两秒自动切换一次</h1>
<!-- 标题区 -->
  <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    <li class="nav-item" role="presentation">
      <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">tab1</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">tab2</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">tab3</a>
    </li>
  </ul>
  
<!-- 内容区 -->
  <div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active " id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">内容1</div>
    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">内容2</div>
    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">内容3</div>
  </div>

</div>

▲基本上就是将官网中的范例选一个，复制贴上，最後在调整id、外观等
如果你只需要tab切换功能，那截至上面，就已经完成了喔！

其他切换范例 可参考官网navs > https://getbootstrap.com/docs/4.6/components/navs/

那如果你也有需要tab切换自动拨放需求，就请看下去吧！

行前提要

开始之前我们必须要先知道，tab切换中bootstrap中也有提供其他的方法可以使用，详细一样可看官网
那我们会使用到的是

$(`selector`).tab('show')

它可以激活某个你选择的selector将对应的tab内容秀出来， 例如：$('#pills-tab li:last-child a').tab('show')；

• 注意是selector对象是标题区域<ul> > <li>的<a>
• 如果没有特别写这个方法预设就是tab的第一个会秀出来

其他需要的方法，因为我在bootstrap中没有找到直接可以使用的，所以以下程序码是自己在写的喔！

逻辑

1.新增全域变数timer跟tabIndex(本来从第一个开始秀)
2.建立一个setTimer()函式，每秒去做显示tab的函式，并将每次投影索引+1(传进去当参数)
3.当滑鼠hover到tab内容区块(也就是$("#pills-tabContent"))时，则会暂停自动拨放，移开时才会又开始拨放

解释

• setInterval固定延迟了某段时间之後，才去执行对应的程序码
• 所以网页load完等3秒後就会秀第2个tab (原本全域tabIndex = 1，之後进行showSlides(tabIndex += 1); tabIndex=已经等於2罗！)
• $('#pills-tab li').eq(2 - 1)　=> $('#pills-tab li').eq(1) 就是第二个tab Title喔
• 为什麽要-1,，是因为选元素是从eq(0)开始的 0是第一个tabTitle

var timer;
var tabIndex = 1;

$(function () {    
  
  setTimer(); // 每三秒执行一次showSlides()
   
    $("#pills-tabContent").hover(function () {
        clearInterval(timer);
    }, function () {
        clearInterval(timer);
        setTimer();
    }); // hover到tab内容区块暂停播放，离开才又开始

})

function setTimer() {
    timer = setInterval(function () {
        showSlides(tabIndex += 1);
    }, 3000); 
}

function showSlides(n) {
    var slidesLength = $("#pills-tabContent .tab-pane").length; // 抓出有几个tab需要切换，3个

    if (n > slidesLength) {
        tabIndex = 1; // 如果 n > 3 就是超过tab总数，则再从1开始秀
    } 
    
    //将指定tab标题的a，使用.tab('show')显示
    $('#pills-tab li').eq(tabIndex - 1).find('a').tab('show');

}

程序码

附上程序码

本篇参考:
https://getbootstrap.com/docs/4.6/components/navs/