Question

Bootstrap 5个标签，带有NEXT/PREV按钮无jQuery

2022-04-24

2005

javascript tabs bootstrap-5

我想在不使用 jQuery 的情况下将“上一个”和“下一个”按钮添加到 bootstrap 5 个选项卡中。

我看到了此帖子，其中有完美的回应，我在下面报告了这一点，但是如果没有 jQuery，我无法在 Javascript 中执行相同的操作。

有人能帮帮我吗？

$('.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>

Answer 1

您仍在调用 jQuery 方法。如果您想避免使用 jQuery，则需要将该逻辑转换为 JavaScript。您的语法和逻辑最终可能会有所不同。

请参阅 https://www.w3schools.com/howto/howto_js_tabs.asp 作为起点。

请记住删除 HTML 文件底部的 jQuery 脚本标记。

Answer 2

下面是一个仅使用 Javascript 的示例，有几种方法可以做到这一点，这是其中之一，我希望它能有所帮助。

const nextBtn = document.querySelectorAll(".btnNext");
const prevBtn = document.querySelectorAll(".btnPrev");

nextBtn.forEach(function(item, index){
    item.addEventListener('click', function(){
      let id = index + 1;
      let tabElement = document.querySelectorAll("#myTab li a")[id];
      var lastTab = new bootstrap.Tab(tabElement);
      lastTab.show();   
    });
});

prevBtn.forEach(function(item, index){
    item.addEventListener('click', function(){
      let id = index;
      let tabElement = document.querySelectorAll("#myTab li a")[id];
      var lastTab = new bootstrap.Tab(tabElement);
      lastTab.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-pills" id="myTab">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">Menu-1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu-2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu-3</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content" id="myTabContent">
  <div class="tab-pane container active" id="home">
    <h1>Menu-1</h1>
    TEXT A:......
    <hr>
    
    <a class="btn btn-primary btnNext">Next</a>
  </div>
  <div class="tab-pane container fade" id="menu1">
    <h1>Menu-2</h1>
    TEXT B:....
    <hr>
    <a class="btn btn-primary btnPrev">Back</a>
    <a class="btn btn-primary btnNext">Next</a>
  </div>
  <div class="tab-pane container fade" id="menu2">
    <h1>Menu-3</h1>
    TEXT C:....
    <hr>
    <a class="btn btn-primary btnPrev">Back</a>
    <input class="btn btn-info" type="submit" value="Submit">
  </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>