Question

我在bootstrap标签和tabpanels无法按预期使用活动类时遇到问题。我知道有很多这方面的问题，但在我读过的所有问题中，添加和删除非活动类根本就没有用。就我而言，它有效...但有点儿。首先，我将提供HTML：

<ul class="nav nav-pills hr-divider-content hr-divider-nav">
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#a-tab" aria-expanded="false">A</a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" data-toggle="pill" href="#b-tab" aria-expanded="true">B</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#c-tab" aria-expanded="false">C</a>
    </li>
</ul>

<div class="tab-content">
    <div id="a-tab" class="tab-pane highlight active" aria-expanded="true">

    </div>
    <div id="b-tab" class="tab-pane highlight" aria-expanded="false">

    </div>
    <div id="c-tab" class="tab-pane highlight" aria-expanded="false">

    </div>
</div>

JavaScript来自于包含所有引导程序4的内容。

所以这就是事情，它从一些问题开始，就是当你在3个标签之间点击它通常会显示其中的2个，但是在点击了大约10秒后它似乎自我修复了完全按预期工作，仅显示当前所选选项卡的内容。我也在我的网站上的其他位置使用具有不同名称的相同的确切代码，并且它完全正常。

有没有人对导致内容仅在前10次左右单击标签时错误显示的内容有任何直觉，但是在页面刷新之前它是否能正常工作？

Answer 1

首先，您必须正确应用活动类。您已将活动类提供给链接，但它应该是li.nav-item以及您将活动类提供给＃b-tab的导航项目在下面给出了活动类到a-tab内容。查看更新的HTML代码

＆＃13;

<ul class="nav nav-pills hr-divider-content hr-divider-nav">
    <li class="nav-item active">
        <a class="nav-link" data-toggle="pill" href="#a-tab" aria-expanded="false">A</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#b-tab" aria-expanded="true">B</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#c-tab" aria-expanded="false">C</a>
    </li>
</ul>

<div class="tab-content">
    <div id="a-tab" class="tab-pane highlight active" aria-expanded="true">
    a-tab content
    </div>
    <div id="b-tab" class="tab-pane highlight" aria-expanded="false">
  b-tab content
    </div>
    <div id="c-tab" class="tab-pane highlight" aria-expanded="false">
  c-tab content
    </div>
</div>

＆＃13;

Answer 2

我认为初始Bootstrap 4代码中存在错误，遇到此问题时我正在使用Bootstrap 4.0.0 beta。我下载了Bootstrap version 4.1.3，现在活动类已按预期从选项卡窗格中删除。

Bootstrap选项卡面板没有删除活动类，但有时仅删除

2 个答案: