- 首页
- 前端开发
- Bootstrap:使用单个选项卡导航控制多个选项卡面板
Bootstrap:使用单个选项卡导航控制多个选项卡面板
[英] Bootstrap: Control multiple tab panels with single tab nav
本文介绍了Bootstrap:使用单个选项卡导航控制多个选项卡面板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想用一个标签导航来控制两个不同的标签内容.
在 Bootstra 3 中，我有一个以逗号分隔的数据目标的解决方案(例如:https://stackoverflow.com/a/19719859/1788961).
但在 Bootsrap 4 中，这种方式不再适用于标签.
折叠组件可以处理多个目标，但我不能将它用于选项卡:https://getbootstrap.com/docs/4.0/components/collapse/#multiple-targets
还有其他方法可以做到这一点吗?
这是我的代码:
<div class="容器"><div class="tab-content" id="ueberTabA"><div class="tab-pane fade" id="panel_a_first" role="tabpanel" aria-labelledby="first-tab">第一
<div class="tab-pane淡出显示活动" id="panel_a_second" role="tabpanel" aria-labelledby="second-tab">一秒
<div class="tab-pane fade" id="panel_a_third" role="tabpanel" aria-labelledby="third-tab">三分之一
<div class="容器"><ul class="nav nav-tabs" id="ueberTab" role="tablist"><li class="nav-item"><a class="nav-link" id="first-tab" data-target="#panel_b_first, #panel_a_first" data-toggle="tab" href="#first" role="tab" aria-controls="first" aria-selected="false">first</a></li><li class="nav-item"><a class="nav-link active" id="second-tab" data-target="#panel_b_second, #panel_a_second" data-toggle="tab" href="#second" role="tab" aria-controls="second" aria-selected="true">second</a></li><li class="nav-item"><a class="nav-link" id="third-tab" data-target="#panel_b_thrid, #panel_a_third" data-toggle="tab" href="#third" role="tab" aria-controls="third" aria-selected="false">Unser third</a></li><div class="tab-content" id="ueberTabB"><div class="tab-pane fade" id="panel_b_first" role="tabpanel" aria-labelledby="first-tab">B优先
<div class="tab-pane淡出显示活动" id="panel_b_second" role="tabpanel" aria-labelledby="second-tab">B秒
<div class="tab-pane fade" id="panel_b_thrid" role="tabpanel" aria-labelledby="third-tab">B第三
解决方案
Bootstrap 5(2021 年更新)
这对于开箱即用"的标签来说是不可能的.但是，JS 可用于显示辅助选项卡窗格...
<预><代码>document.querySelectorAll('button[data-bs-toggle="tab"]').forEach((t,i)=>{t.addEventListener('show.bs.tab', function (e) {让 targetClass = t.dataset.bsTargetvar pane = document.querySelector('#secondTabContent '+targetClass)var Brother = document.querySelector('#secondTabContent .tab-pane.active')//隐藏第二个窗格兄弟Brother.classList.remove('show')Brother.classList.remove('active')//显示第二个窗格pane.classList.add('show')pane.classList.add('active')})})Bootstrap 5 - 来自单个导航的多个 Tab 窗格
引导程序 4(原始答案)
这在 Bootstrap 4.0.0 中是不可能的.这是目前一个悬而未决的问题，并且可能是一个想法".对于 Bootstrap 4.1.
https://github.com/twbs/bootstrap/issues/19964
I want to control two differnt tab contents with a single tab navigation.
In Bootstra 3 I had a solution with comma separated data targets (like in this example: https://stackoverflow.com/a/19719859/1788961).
But in Bootsrap 4, this way is not working anymore for tabs.
The collapse component could work with multiple targets, but I couldn't use it for the tabs: https://getbootstrap.com/docs/4.0/components/collapse/#multiple-targets
Is there an other way to do this?
Here's my code:
<div class="B">
<div class="container">
<div class="tab-content" id="ueberTabA">
<div class="tab-pane fade" id="panel_a_first" role="tabpanel" aria-labelledby="first-tab">
A First
</div>
<div class="tab-pane fade show active" id="panel_a_second" role="tabpanel" aria-labelledby="second-tab">
A Second
</div>
<div class="tab-pane fade" id="panel_a_third" role="tabpanel" aria-labelledby="third-tab">
A Third
</div>
</div>
</div>
</div>
<div class="container">
<ul class="nav nav-tabs" id="ueberTab" role="tablist">
<li class="nav-item"><a class="nav-link" id="first-tab" data-target="#panel_b_first, #panel_a_first" data-toggle="tab" href="#first" role="tab" aria-controls="first" aria-selected="false">first</a></li>
<li class="nav-item"><a class="nav-link active" id="second-tab" data-target="#panel_b_second, #panel_a_second" data-toggle="tab" href="#second" role="tab" aria-controls="second" aria-selected="true">second</a></li>
<li class="nav-item"><a class="nav-link" id="third-tab" data-target="#panel_b_thrid, #panel_a_third" data-toggle="tab" href="#third" role="tab" aria-controls="third" aria-selected="false">Unser third</a></li>
</ul>
<div class="tab-content" id="ueberTabB">
<div class="tab-pane fade" id="panel_b_first" role="tabpanel" aria-labelledby="first-tab">
B First
</div>
<div class="tab-pane fade show active" id="panel_b_second" role="tabpanel" aria-labelledby="second-tab">
B Second
</div>
<div class="tab-pane fade" id="panel_b_thrid" role="tabpanel" aria-labelledby="third-tab">
B Third
</div>
</div>
</div>
解决方案
Bootstrap 5 (update 2021)
This is not possible with Tabs "out of the box". However, JS could be used to show secondary tab-panes...
document.querySelectorAll('button[data-bs-toggle="tab"]').forEach((t,i)=>{
t.addEventListener('show.bs.tab', function (e) {
let targetClass = t.dataset.bsTarget
var pane = document.querySelector('#secondTabContent '+targetClass)
var sibling = document.querySelector('#secondTabContent .tab-pane.active')
// hide 2nd pane sibling
sibling.classList.remove('show')
sibling.classList.remove('active')
// show 2nd pane
pane.classList.add('show')
pane.classList.add('active')
})
})
Bootstrap 5 - multiple Tab panes from single Nav
Bootstrap 4 (original answer)
This is not possible in Bootstrap 4.0.0. This is currently an open issue, and a possible "idea" for Bootstrap 4.1.
https://github.com/twbs/bootstrap/issues/19964
这篇关于Bootstrap:使用单个选项卡导航控制多个选项卡面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
