BootStrap 4 - JQuery Count Number and Programmatically Navigate through list of nav-items in a nav-tabs component

1
votes

In reading the BootStrap documentation related to the nav-tabs, I do not see any way to simply count the number of nav-items in a nav-tabs class.

BootStrap Nav/Tabs

I have searched StackOverflow and the internet without success. Surely there is a way to return a count of # of defined nav-items using jquery.

The requirement is our users want Previous and Next buttons below the "tabbed" view of the data. They "could" click on each individual tab header to display the contents of the tab, but would rather click a button (i.e. Next Tab or Previous Tab). I was hoping to implement a generic function since there are a large number of windows in which to apply this design. Next, depending on which Button is clicked (previous or next), I could do something like this:

Pseudo-code

if ((buttonClicked == 'Previous') && ((currentTab - 1) != 0) {
   tabPane.currentTab -= 1;
} else if ((buttonClicked == 'Previous') && ((currentTab - 1) == 0) {
   previousButton.disable();
} else if ((buttonClicked == 'Next') && ((currentTab + 1) <= maxTabs) {
   tabPane.currentTab += 1;
} else if ((buttonClicked == 'Next') && ((currentTab + 1) == maxTabs) {
   nextButton.disable();
}

Hopefully, there is an easy answer to my minor dilemma.

1
jquerybootstrap-4

1 Answers

2
votes

You can easily do this without counting the tab number.

Here's the solution: 

const mytab = $('#myTab');

$('.tab-controller button').on('click', function() {
  const isNextBtn = $(this).hasClass('next');
  const isPrevBtn = $(this).hasClass('prev');
  const currentItem = mytab.find('.nav-link.active');
  const itemParent = currentItem.parent();
  
  if(!itemParent.is(':first-child') && isPrevBtn){
      itemParent.prev().find('a').tab('show');
  }
  
  if(!itemParent.is(':last-child') && isNextBtn){
      itemParent.next().find('a').tab('show');
  }
  
});
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
      </li>
    </ul>
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home Content</div>
      <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile Content</div>
      <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact Content</div>
    </div>
      
    <div class="tab-controller">
      <button class="prev">Prev</button>
      <button class="next">Next</button>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>