带有上一个和下一个按钮的 Bootstrap 4 选项卡答案

【问题标题】：Bootstrap 4 Tabs with Previous & Next buttons带有上一个和下一个按钮的 Bootstrap 4 选项卡
【发布时间】：2019-01-10 07:35:44
【问题描述】：

我正在尝试在 bootstrap 4 选项卡 sn-p 中创建一些上一个和下一个按钮，但我在使用 Jquery 时遇到了问题。更具体地说，构建我的触发事件或触发事件的路径。

我似乎无法正确确定路线。我对 Jquery 相当缺乏经验，所以要温柔。 ;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) 找到我正在构建的完整内容；

非常感谢。

-B.

【问题讨论】：

标签： jquery html bootstrap-4

【解决方案1】：

您需要获取active 选项卡的父级，然后获取.next() 或.prev()。所以，正确的 jQuery 选择器应该是...

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

【讨论】：