Bootstrap 4 JS 菜单选项卡

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：

1. 手动处理标签点击：https://getbootstrap.com/docs/4.0/components/navs/#via-javascript 工作示例：https://codepen.io/cdtapay/pen/bzegNB
2. 不符合语义，将所有链接保留在同一个列表 (ul) 中，包括部分标签。 工作示例：https://codepen.io/cdtapay/pen/QYNRwb

希望对你有所帮助。

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