Bootstrap：使用单个选项卡导航控制多个选项卡面板

Question

我想用一个标签导航控制两个不同的标签内容。

在 Bootstra 3 中，我有一个以逗号分隔的数据目标的解决方案（如本例中所示：https : //stackoverflow.com/a/19719859/1788961）。

但是在 Bootsrap 4 中，这种方式不再适用于选项卡。

折叠组件可以处理多个目标，但我不能将它用于选项卡：https : //getbootstrap.com/docs/4.0/components/collapse/#multiple-targets

有没有其他方法可以做到这一点？

这是我的代码：

<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>

Answer 1

Bootstrap 5（2021 年更新）

这对于“开箱即用”的选项卡来说是不可能的。然而，JS 可以用来显示辅助选项卡窗格......

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 - 来自单个导航的多个选项卡窗格

Bootstrap 4（原始答案）

这在 Bootstrap 4.0.0 中是不可能的。目前这是一个悬而未决的问题，也是 Bootstrap 4.1 的一个可能的“想法”。

https://github.com/twbs/bootstrap/issues/19964