如何使用 bootstrap 4.x 使用一个选项卡来更改两个选项卡容器的内容？答案

【问题标题】：How to change the content of two tabs container by using one tab using bootstrap 4.x?如何使用 bootstrap 4.x 使用一个选项卡来更改两个选项卡容器的内容？
【发布时间】：2019-06-08 10:06:40
【问题描述】：

我正在尝试创建两个选项卡容器，其中一个用于描述一组文件的内容，第二个用作所描述文件的下载链接列表。

现在我所做的是尝试仅使用一个选项卡来控制两个容器，我看到一个解决方案使用 data-target 和两个 ID 类似

data-target="#TabA1, #TabB1"

但这个选项似乎不适用于 bootstrap 4.x，所以有什么解决方案或变通方法可以解决这个问题。

这里是我的代码，如果有人可以帮助我。

  <div class="row">
    <div class="col-sm-8">
        <div class="card text-center ">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#TabA1" data-target="#A1, #B1" data-toggle="tab" role="tab" aria-selected="true">A1/B1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#TabA2" data-target="#A2, #B2" data-toggle="tab" role="tab" aria-selected="false">A2/B2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#TabA3" data-target="#A3, #B3" data-toggle="tab" role="tab" aria-selected="false">A3/B3</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#TabA4" data-target="#A4, #B4" data-toggle="tab" role="tab" aria-selected="false">A4/B4</a>
                    </li>
                </ul>
            </div>
            <div class="card-body" style="text-align: left; overflow-y: scroll; max-height: 600px;">
                <div class="tab-content" id="myTabContent_A">
                    <div class="tab-pane fade show active" id="TabA1" role="tabpanel">
                        A1
                    </div>
                    <div class="tab-pane fade" id="TabA2" role="tabpanel">
                        A2
                    </div>
                    <div class="tab-pane fade" id="TabA3" role="tabpanel">
                        A3
                    </div>
                    <div class="tab-pane fade" id="TabA4" role="tabpanel">
                        A4
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="card">
            <h5 class="card-header">Files</h5>
            <div class="card-body">
                <h5 class="card-title"></h5>

                <div class="tab-content" id="myTabContent_B">
                    <div class="tab-pane fade show active" id="TabB1" role="tabpanel">
                        B1
                    </div>
                    <div class="tab-pane fade" id="TabB2" role="tabpanel">
                        B2
                    </div>
                    <div class="tab-pane fade" id="TabB3" role="tabpanel">
                        B3
                    </div>
                    <div class="tab-pane fade" id="TabB4" role="tabpanel">
                        B4
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

仅通过提到的 HTML 代码，我可以看到第一个选项卡容器发生了变化。但我希望看到容器 A 和 B 都发生了变化。

【问题讨论】：

请发布您的尝试Minimal, Complete, and Verifiable example，注明输入和预期输出。
查看此示例link
有什么想法吗？
您使用的是哪个引导程序版本？
引导版本 4.1.3

标签： javascript jquery twitter-bootstrap bootstrap-4

【解决方案1】：

不幸的是，在 bootstrap 4.X 中，这已被删除，并且有一个 github 问题来讨论它，这应该是 4.1 的一个想法，但这个想法在 4.2 中已被删除，因此不可能这样做原生引导，你需要使用 JS。

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

【讨论】：