jquery - 带有上一个和下一个按钮的 Bootstrap 4 个选项卡

Question

我正在尝试在 bootstrap 4 选项卡片段中创建一些上一个和下一个按钮，但是我在使用 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。

标签： jqueryhtmlbootstrap-4

Answer 1

您需要获取active选项卡的父级，然后是.next()or .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