使用jQuery生成时，多个Bootstrap选项卡保持活动状态

Question

我有以下具有我要使用jQuery选择的特殊属性的div

<div data-tab-name="Description">
    <!-- content -->
</div> 
<div data-tab-name="Video">
    <!-- content -->
</div> 
<div data-tab-name="Reviews">
    <!-- content -->
</div> 

然后，我将这些div转换为单独的Bootstrap选项卡（＆nav-tabs），并尝试将第一个选项卡窗格和nav-tab设置为活动状态。 结果如下：

<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" href="#description">Description</a>
    </li>
    <li>
        <a data-toggle="tab" href="#video">Video</a>
    </li>
    <li>
        <a data-toggle="tab" href="#reviews">Reviews</a>
    </li>
</ul>

<div class="row tab-content">
    <div class="tab-pane fade in active" id="description">
        <!-- Content -->
    </div>
    <div class="tab-pane fade" id="video">
        <!-- Content -->
    </div>
    <div class="tab-pane fade" id="reviews">
        <!-- Content -->
    </div>
</div>

每当我运行代码时，它都会按预期的方式进行结构化，这就是w3school的boostrap选项卡示例所显示的 （“动态选项卡”），但是当我在它们之间切换时，多个选项卡保持活动状态，从而防止了两次单击。

直接输入标签的html时，我需要做些什么以使其表现正常？ https://codepen.io/BBell/pen/RBLmEr

---

我不确定为什么stacksnippet显示脚本错误，但是即使我删除了JS（ http://recordit.co/8mazS35U9r ），它仍然继续显示。 这是一个对我来说效果更好的备用Codepen：

https://codepen.io/BBell/pen/VBzJXz

 $(document).ready(function() { function cssEncode(name) { return name.replace(/ /g, "-").toLowerCase(); } var dataAttr = "data-tab-name"; var tabDivs = $("div[" + dataAttr + "]"); var navTabs = $('<div class="nav nav-tabs">'); var tabContent = $('<div class="tab-content" id="tabs"></div>'); var tabs = []; var tabPanes = []; tabDivs.each(function(e) { var name = $(this).attr(dataAttr); var encodedName = cssEncode(name); tabs.push( '<li><a data-toggle="tab" href="#' + encodedName + '">' + name + "</a></li>" ); var tabPane = $( '<div class="tab-pane fade" id="' + encodedName + '"></div>' ).append($(this).html()); tabPanes.push(tabPane); $(this).detach(); }); navTabs.append(tabs.join("")); tabContent.append(tabPanes); var tabsContainer = $('<div class="tabs"></div>'); tabsContainer.append(navTabs); tabsContainer.append(tabContent); $(".iseo-item-page .col-md-12").append(tabsContainer); $(".nav-tabs a:first").tab("show"); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row iseo-item-page"> <div class="col-md-12"> <div data-tab-name="Description"> Content 0 </div> <div data-tab-name="Video"> Content 1 </div> <div data-tab-name="Reviews"> Content 2 </div> </div> </div> </div> 

Answer 1

主要的问题是，当您像动态地执行li一样时， li元素全部都变为active类，但应该只是一个active。 看@您提供的示例作为选项卡上的一个工作检查元素...您将看到，一旦选择了一个选项卡/ li ，它将获得active类，而上一个类别将使其松动。 在您的示例中，该类被设置为全部，因此您无法再次单击它们。

这是一个基本上可以解决bootstrap js的工作版本：

 $(document).ready(function() { function cssEncode(name) { return name.replace(/ /g, "-").toLowerCase(); } var dataAttr = "data-tab-name"; var tabDivs = $("div[" + dataAttr + "]"); var navTabs = $('<div class="nav nav-tabs">'); var tabContent = $('<div class="tab-content" id="tabs"></div>'); var tabs = []; var tabPanes = []; tabDivs.each(function(e) { var name = $(this).attr(dataAttr); var encodedName = cssEncode(name); tabs.push( '<li><a data-toggle="tab" href="#' + encodedName + '">' + name + "</a></li>" ); var tabPane = $( '<div class="tab-pane fade" id="' + encodedName + '"></div>' ).append($(this).html()); tabPanes.push(tabPane); $(this).detach(); }); navTabs.append(tabs.join("")); tabContent.append(tabPanes); var tabsContainer = $('<div class="tabs"></div>'); tabsContainer.append(navTabs); tabsContainer.append(tabContent); $(".iseo-item-page .col-md-12").append(tabsContainer); $('a[data-toggle="tab"]').on('click', function (e) { e.preventDefault(); $(this).parent().addClass("active"); $('li').not(this.parentNode).removeClass('active') $('.iseo-item-page div').removeClass('active in') $(this.hash).addClass('active in') }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row iseo-item-page"> <div class="col-md-12"> <div data-tab-name="Description"> Content 0 </div> <div data-tab-name="Video"> Content 1 </div> <div data-tab-name="Reviews"> Content 2 </div> </div> </div> </div>