时间戳

首页 > 解决方案 > 使用 jQuery 生成时，多个 Bootstrap 选项卡保持活动状态

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

问题描述

我有以下带有特殊属性的 div，这些属性是我用 jQuery 选择的

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

然后，我将这些 div 转换为单独的 Bootstrap 选项卡（和导航选项卡），并尝试将第一个选项卡窗格和导航选项卡设置为活动状态。这是结果：

<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），它也会继续显示。这是一个对我来说效果更好的备份代码笔：

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>

标签： javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

解决方案

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

这是一个基本围绕 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>

推荐阅读