Question

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

现在我要做的是尝试仅使用一个选项卡来控制两个容器，我看到了一个使用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都发生了更改。

Answer 1

不幸的是，在引导程序4.X中，此问题已被删除，并且存在讨论该问题的github问题，本来应该是4.1的想法，但是在4.2中已删除了这个想法，因此不可能在本机引导程序，您需要使用JS。

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

如何通过引导程序4.x使用一个选项卡更改两个选项卡容器的内容？

1 个答案: