Bootstrap 5 Tabs with Next/Prev Button-CodePudding

How can I add prev/next buttons to bootstrap 5 tabs?

I've tried to use recommended methods for previous versions but the structure must be different. What am I missing here with the 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 >
  <li >
    <a  data-bs-toggle="tab" href="#home">Home</a>
  </li>
  <li >
    <a  data-bs-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li >
    <a  data-bs-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>

<!-- Tab panes -->
<div >
  <div  id="home">
    <h1>Home</h1>
    <a >Next</a>

  </div>
  <div  id="menu1">
    <h1>Menu 1</h1>
    <a >Back</a>
    <a >Next</a>
  </div>
  <div  id="menu2">
    <h1>Menu 2</h1>
    <a >Back</a>
  </div>
</div>

CodePudding user response：

The main problem is that the active class actually ends up on the anchor element after Bootstrap does its thing, so your child selector wasn't finding it.

Here I'm using Bootstrap's show method rather than a click trigger. It's a bit more inline with Bootstrap's design pattern.

$('.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 >
  <li >
    <a  data-bs-toggle="tab" href="#home">Home</a>
  </li>
  <li >
    <a  data-bs-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li >
    <a  data-bs-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>

<!-- Tab panes -->
<div >
  <div  id="home">
    <h1>Home</h1>
    <a >Next</a>

  </div>
  <div  id="menu1">
    <h1>Menu 1</h1>
    <a >Back</a>
    <a >Next</a>
  </div>
  <div  id="menu2">
    <h1>Menu 2</h1>
    <a >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>