Bootstrap 4 Tabs with Previous & Next buttons

问题

I'm attempting to create some previous and next buttons within a bootstrap 4 tab snippet, but I'm having trouble with the Jquery. More specifically structuring my trigger event or' the path to my trigger event.

I can't seem to figure out the route properly. I'm fairly inexperienced with Jquery so be gentle. ;P

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

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

You can find a full snippet of what I'm in the process of building here (JSFiddle);

Many thanks in advance.

-B.

回答1:

You need to get the parent of the active tab and then .next() or .prev(). So, the correct jQuery selectors would be...

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

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

https://www.codeply.com/go/d7X3s15VCS

来源：https://stackoverflow.com/questions/51655164/bootstrap-4-tabs-with-previous-next-buttons