如何向 Bootstrap 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/[email protected] /cdn-cgi/l/email-protection/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/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>
主要问题是active类实际上最终在anchorBootstrap 执行其操作后的元素，因此您的子选择器找不到它。
我在这里使用引导程序的show method https://getbootstrap.com/docs/5.1/components/navs-tabs/#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/[email protected] /cdn-cgi/l/email-protection/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/[email protected] /cdn-cgi/l/email-protection/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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
