Bootstrap 5标签与下一个/上一个按钮

Question

如何将上一个/下一个按钮添加到引导程序5个选项卡？

我已经尝试使用以前版本的推荐方法，但结构必须不同。jQuery缺少什么？

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="home">
<h1>Home</h1>
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane container fade" id="menu1">
<h1>Menu 1</h1>
<a class="btn btn-primary btnPrevious">Back</a>
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane container fade" id="menu2">
<h1>Menu 2</h1>
<a class="btn btn-primary btnPrevious">Back</a>
</div>
</div>

Answer 1

主要问题是active类实际上在Bootstrap完成它的任务后最终出现在锚点元素上，所以您的子选择器没有找到它。

这里我使用的是Bootstrap的show方法，而不是点击触发器。它更符合Bootstrap的设计模式。

$('.btnNext').click(function() {
const nextTabLinkEl = $('.nav-tabs .active').closest('li').next('li').find('a')[0];
const nextTab = new bootstrap.Tab(nextTabLinkEl);
nextTab.show();
});
$('.btnPrevious').click(function() {
const prevTabLinkEl = $('.nav-tabs .active').closest('li').prev('li').find('a')[0];
const prevTab = new bootstrap.Tab(prevTabLinkEl);
prevTab.show();
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="home">
<h1>Home</h1>
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane container fade" id="menu1">
<h1>Menu 1</h1>
<a class="btn btn-primary btnPrevious">Back</a>
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane container fade" id="menu2">
<h1>Menu 2</h1>
<a class="btn btn-primary btnPrevious">Back</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>