5

1 つのタブ ナビゲーションで 2 つの異なるタブ コンテンツを制御したい。

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

2 に答える 2

2

ブートストラップ 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 - 単一のナビゲーションからの複数のタブ ペイン

ブートストラップ 4 (元の回答)

これは、Bootstrap 4.0.0 では不可能です。これは現在未解決の問題であり、Bootstrap 4.1 で考えられる「アイデア」です。

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

于 2018-02-08T08:58:08.630 に答える