引导程序4：使用单个选项卡导航控制多个选项卡面板 [英] Bootstrap 4: Control multiple tab panels with single tab nav

问题描述

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

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

崩溃组件可以用于多个目标，但我无法将其用于该标签： https://getbootstrap.com/docs/4.0/components/崩溃/＃多个目标

是否有其他方法可以执行此操作？

我的代码：

 < div class =B> 
< div class =container> 
 
< div class =tab-contentid =ueberTabA> 
< div class =tab-pane fadeid =panel_a_firstrole =tabpanelaria-labelledby =first-tab> 
 A首先
< / div> 
< div class =tab-pane fade show activeid =panel_a_secondrole =tabpanelaria-labelledby =second-tab> 
第二个
< / div> 
< div class =tab-pane fadeid =panel_a_thirdrole =tabpanelaria-labelledby =third-tab> 
第三个
< / div> 
< / div> 
< / div> 
< / div> 
 
< div class =container> 
< ul class =nav nav-tabsid =ueberTabrole =tablist> 
< li class =nav-item>< a class =nav-linkid =first-tabdata-target =＃panel_b_first，#panel_a_firstdata-toggle =tab href =＃firstrole =tabaria-controls =firstaria-selected =false> first< / a>< / li> 
 
< li class =nav-item>< a class =nav-linkid =third-tabdata-target =＃panel_b_thrid，#panel_a_thirddata-toggle =tab href =＃thirdrole =tabaria-controls =thirdaria-selected =false> Unser third< / a>< / li> 
< / ul> 
< div class =tab-contentid =ueberTabB> 
< div class =tab-pane fadeid =panel_b_firstrole =tabpanelaria-labelledby =first-tab> 
 B首先
< / div> 
< div class =tab-pane fade show activeid =panel_b_secondrole =tabpanelaria-labelledby =second-tab> 
 B第二个
< / div> 
< div class =tab-pane fadeid =panel_b_thridrole =tabpanelaria-labelledby =third-tab> 
 B Third 
< / div> 
< / div> 
< / div> 
  

解决方案

这在Bootstrap 4.0.0中不可行。这是目前公开的问题，也是Bootstrap 4.1的一个可能的想法。 / 19964rel =nofollow noreferrer> 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>

解决方案

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

这篇关于引导程序4：使用单个选项卡导航控制多个选项卡面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！