帶有下一個/上一個按鈕的引導5個選項卡

如何將上一個/下一個按鈕添加到引導 5 個選項卡？

我嘗試對以前的版本使用推薦的方法，但結構必須不同。jQuery在這里缺少什么？

$('.btnNext').click(function() {
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function() {
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">
    <h1>Home</h1>
    <a class="btn btn-primary btnNext">Next</a>

  </div>
  <div class="tab-pane container fade" id="menu1">
    <h1>Menu 1</h1>
    <a class="btn btn-primary btnPrevious">Back</a>
    <a class="btn btn-primary btnNext">Next</a>
  </div>
  <div class="tab-pane container fade" id="menu2">
    <h1>Menu 2</h1>
    <a class="btn btn-primary btnPrevious">Back</a>
  </div>
</div>

uj5u.com熱心網友回復：

主要問題是，在 Bootstrap 完成它的操作之后，active該類實際上最終位于錨元素上，因此您的子選擇器沒有找到它。

這里我使用的是Bootstrap 的show方法，而不是點擊觸發器。它更符合 Bootstrap 的設計模式。

$('.btnNext').click(function() {
  const nextTabLinkEl = $('.nav-tabs .active').closest('li').next('li').find('a')[0];
  const nextTab = new bootstrap.Tab(nextTabLinkEl);
  nextTab.show();
});

$('.btnPrevious').click(function() {
  const prevTabLinkEl = $('.nav-tabs .active').closest('li').prev('li').find('a')[0];
  const prevTab = new bootstrap.Tab(prevTabLinkEl);
  prevTab.show();
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">
    <h1>Home</h1>
    <a class="btn btn-primary btnNext">Next</a>

  </div>
  <div class="tab-pane container fade" id="menu1">
    <h1>Menu 1</h1>
    <a class="btn btn-primary btnPrevious">Back</a>
    <a class="btn btn-primary btnNext">Next</a>
  </div>
  <div class="tab-pane container fade" id="menu2">
    <h1>Menu 2</h1>
    <a class="btn btn-primary btnPrevious">Back</a>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

標籤：jQuery 引导程序 5

上一篇：當視窗大于x時運行腳本，以及調整視窗大小時

下一篇：在Jquery中獲取資料屬性的值