使用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's boostrap tab example shows（动态选项卡），但是当我在它们之间切换时，多个选项卡保持活动状态，从而防止了两次单击。

当直接输入选项卡的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元素那样动态地执行操作时，所有元素都获得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>