用上一个&amp ;;引导4个选项卡下一步按钮 [英] Bootstrap 4 Tabs with Previous & Next buttons

问题描述

我正在尝试在bootstrap 4选项卡片段中创建一些上一个和下一个按钮，但是我在使用Jquery时遇到了麻烦.更具体地说，构造触发事件或触发事件的路径.

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.

我似乎找不到正确的路线.我对Jquery缺乏经验，所以要保持温柔. ; P

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');
  });
});

您可以在此处找到构建过程的完整摘要( JSFiddle );

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

非常感谢.

-B.

推荐答案

您需要获取active选项卡的父项，然后获取.next()或.prev().因此，正确的jQuery选择器将是...

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

这篇关于用上一个&amp ;;引导4个选项卡下一步按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！