Question

我有此代码，但可以正常运行。

<div class="row">
<div class="col-4">
    <strong>Ⅰ. Main A</strong>
    <ul class="nav flex-column list-style">
        <li class=""><a class="" data-toggle="tab" href="#item1">A 1</a></li>
        <li class=""><a class="" data-toggle="tab" href="#item2">A 2</a></li>
        <li class=""><a class="" data-toggle="tab" href="#item3">A 3</a></li>
    </ul>
    <strong>Ⅱ Main B</strong>
    <ul class="nav flex-column list-style">
        <li class=""><a class="" data-toggle="tab" href="#item4">B 1</a></li>
    </ul>
</div>
<div class="col-8 border-left ">
    <div class="tab-content ">
        <div class="tab-pane scroll-able" id="item1">
            <h3>A 1</h3>
        </div>
        <div class="tab-pane scroll-able" id="item2">
            <h3>A 2</h3>
        </div>
        <div class="tab-pane scroll-able" id="item3">
            <h3>A 3</h3>
        </div>
        <div class="tab-pane scroll-able" id="item4">
            <h3>B 1</h3>
        </div>
    </div>
</div>

当我单击每个按钮时，其将正确显示内容但当我单击其他子菜单（例如B1和A3来回）时，它无法正常工作并离开活动和显示课

我的数据是动态的。

Answer 1

我已经在Codepen上对其进行了测试，它的工作原理就像一个超级按钮，单击另一个切换开关时，活动类将被删除。

https://codepen.io/fazlurr/pen/QYNPBe

<div class="row">
<div class="col-4">
    <strong>Ⅰ. Main A</strong>
    <ul class="nav flex-column list-style">
        <li class=""><a class="" data-toggle="tab" href="#item1">A 1</a></li>
        <li class=""><a class="" data-toggle="tab" href="#item2">A 2</a></li>
        <li class=""><a class="" data-toggle="tab" href="#item3">A 3</a></li>
    </ul>
    <strong>Ⅱ Main B</strong>
    <ul class="nav flex-column list-style">
        <li class=""><a class="" data-toggle="tab" href="#item4">B 1</a></li>
    </ul>
</div>
<div class="col-8 border-left ">
    <div class="tab-content ">
        <div class="tab-pane scroll-able" id="item1">
            <h3>A 1</h3>
        </div>
        <div class="tab-pane scroll-able" id="item2">
            <h3>A 2</h3>
        </div>
        <div class="tab-pane scroll-able" id="item3">
            <h3>A 3</h3>
        </div>
        <div class="tab-pane scroll-able" id="item4">
            <h3>B 1</h3>
        </div>
    </div>
</div>

也许生成ID的方式不正确。

Answer 2

我玩了一段时间，注意到了您的举报，然后转到Bootstrap源，告诉它是BS限制（请参见show方法）。

然后我看到的简单选项基本上是2：

手动处理选项卡的单击：https://getbootstrap.com/docs/4.0/components/navs/#via-javascript 工作示例 ：https://codepen.io/cdtapay/pen/bzegNB
不具有语义并将所有链接（包括节标签）保留在同一列表（ul）中。 工作示例 ：https://codepen.io/cdtapay/pen/QYNRwb

希望有帮助。

更新：报告了一个有关show类泄漏的问题：https://github.com/twbs/bootstrap/issues/28118

Bootstrap 4 JS菜单选项卡

2 个答案: