"下一个"和"上一个"按钮逐步执行引导选项卡

Question

我正在尝试获取一些"上一个"和"下一个"按钮来逐步浏览一些引导选项卡窗格。

我读过一些似乎很接近的文章，但不完全是我想要的。

其他示例似乎正在寻找active导航选项卡，但下一个和上一个按钮位于单独的选项卡容器中，我试图让它们独立于它们在导航容器中，因此该方法实际上不起作用。

到目前为止，我一直在使用.next()将active类和show类添加到选项卡窗格中，但它似乎将它们添加到所有选项卡窗格中，而不仅仅是单独添加一个选项卡窗格。所以，如果我走在正确的道路上，或者是否有更简单的方法来实现这一点，我不是 100%？似乎有，我可能只是在给自己添麻烦。

无论如何，这是我到目前为止所拥有的...

代码笔链接：https://codepen.io/ultraloveninja/pen/OBjmzy/

.HTML：

<div class="container">
<!-- Nav tabs -->
<ul id="mytabs" class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#first" role="tab" data-toggle="tab">
<icon class="fa fa-home"></icon> First tab
</a>
</li>
<li><a href="#second" role="tab" data-toggle="tab">
<i class="fa fa-user"></i> Second tab
</a>
</li>
<li>
<a href="#third" role="tab" data-toggle="tab">
<i class="fa fa-envelope"></i> Third tab
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade active in" id="first">
<h2>First tab</h2>
</div>
<div class="tab-pane fade" id="second">
<h2>Second tab</h2>
</div>
<div class="tab-pane fade" id="third">
<h2>Third tab</h2>
</div>
</div>
<a class="btn prev" href="#">Previous</a>
<a class="btn next" href="#">Next</a>
</div>

.JS：

$(function(){
$('#mytabs a:first').tab('show');
$('.next').on("click",function(e){
var $this = $(this);
if($(".tab-pane").hasClass("active")) {
$('.tab-pane').next().addClass('show active');
$this.prev().removeClass('show active');
e.preventDefault();
}
});  
});

我想，如果我能通过部分找出下一步，那么我可以修改上一步。

Answer 1

好的，在分解并四处询问后，我发现了这个：

$(".next").on("click", function(e) {
const $active = $(".tab-pane.active");
const $next = $active.next();
if ($next.length) {
$active.removeClass("active show");
$next.addClass("active show");
}
e.preventDefault();
});
$(".prev").on("click", function(e) {
const $active = $(".tab-pane.active");
const $prev = $active.prev();
if ($prev.length) {
$active.removeClass("active show");
$prev.addClass("active show");
}
e.preventDefault();
});

最重要的是，您需要确保在保存选项卡窗格的div之外有上一个和下一个按钮。否则，它将继续沿着链条向下发展。

这是我放在一起的一支非常不精致的笔，以帮助说明我想要实现的目标：

https://codepen.io/ultraloveninja/pen/OBjmzy