使用表單的下一個和上一個按鈕的 Bootstrap 選項卡

Question

我試圖在多個選項卡中拆分表單，但在第二個和第三個選項卡上的下一個和上一個按鈕出現問題時遇到了問題。

我希望頂部的選項卡更改狀態，就像您通過單擊按鈕循環瀏覽選項卡一樣。

我已經創建了一個代碼筆，如果有人知道我做錯了什么，請告訴我。

https://codepen.io/austin-simpkins/pen/yLyNLem

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

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

Answer 1

active類正在 a.nav-link 節點上設置，因此您需要查找其活動狀態：

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

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

Answer 2

active鏈接不是nav-pills的直接子nav-pills ，因此刪除子級 ( > ) 選擇器：

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

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

演示

---

帶有上一個和下一個按鈕的 Bootstrap 4 選項卡