在引导程序中动态添加选项卡在导航离开和返回后不显示选项卡窗格内容答案

【问题标题】：Dynamically adding a tab in bootstrap doesn't show tab-pane content after navigating away and back在引导程序中动态添加选项卡在导航离开和返回后不显示选项卡窗格内容
【发布时间】：2019-04-24 11:23:36
【问题描述】：

我见过很多类似的问题，但没有一个是这样的（我能找到）。

这是在 rails 5 应用程序、bootstrap-sass 3.3、jquery 1.12.4 中。

$("#opendata").on("click", function(){
  $("<div class='tab-pane active' id='summary'>hi</div>").appendTo("#tab-content");
  $("<li class='active' data-toggle='tab'><a href='summary' aria-expanded='true'>Summary</a></li>").appendTo("#tabs")
 })

我有 2 个与页面一起加载的选项卡，需要动态添加其他选项卡。上面的代码有效 - 添加了选项卡，并显示了选项卡窗格的内容。但是，如果我离开该选项卡并返回（选项卡本身将变为活动状态），则选项卡窗格将显示前一个选项卡的内容。

我已将问题缩小到动态选项卡窗格上没有放置“活动”类。我也尝试通过控制台执行此操作，但它也不起作用。

我看到的动态标签的主要解决方案是添加类似这样的内容

jQuery(function($){
  $("tabs").on("click", "a", function(e){
    e.preventDefault();
    $(this).tab('show');
  })
})

但无济于事。似乎添加的选项卡窗格只是不响应任何东西，控制台或其他。我错过了什么或以错误的方式解决这个问题吗？选项卡添加得很好，只是在导航离开和返回时它没有响应。

【问题讨论】：

你试过直接调用它的id来显示标签吗？ $('#summary').tab('show') 。 $("tabs") 似乎是错误的选择器。
我做了 - 对于页面加载的选项卡以及动态添加的选项卡。对他们中的任何一个都不起作用。

标签： javascript jquery twitter-bootstrap-3

【解决方案1】：

因此，我将这归结为查看相同代码的时间过长。解决办法是：

$("<li class='active' data-toggle='tab'><a href='#summary' aria-expanded='true'>Summary</a></li>").appendTo("#tabs")

请注意我在第一篇文章中忘记的 href 前面的“#”。

【讨论】：