Javascript调用无效的Bootstrap选项卡内容

如何解决Javascript调用无效的Bootstrap选项卡内容

我有一个带有Bootstrap（v3）标签的页面：

https://getbootstrap.com/docs/3.3/javascript/#tabs

每个选项卡中都有一些迷你图图形：

https://omnipotent.net/jquery.sparkline/#s-docs

并这样称呼：

  $('.sparkline-pie-remaining').sparkline('html',{
    type: 'pie',sliceColors: ['#1ab394','#ed5565','#ddd'],width: '18',height: '18',offset: -90,disabletooltips: true,borderWidth: 1,borderColor: '#676a6c'
  });

问题是未激活的选项卡上没有调用此方法。显示选项卡时我尝试过一个回调，但是每次选项卡更改并清除图形时，都会调用此回调。

在呈现页面时，如何在不活动的标签内容上进行此调用？这是一个重现该问题的CodePen：

https://codepen.io/dantappin/pen/rNegXOP

解决方法

未在非活动标签中显示迷你图的原因是，该tabpanel div具有“ display：none”属性。这是documentation you provided的一部分（请参见“隐藏的迷你图”部分）：

如果您尝试在当前未显示的代码中显示迷你图 可见的（即标记或其父项之一设置为不显示） 那么您会发现当您绘制迷你图时 最后，使标签可见。这是因为带有 display：none没有大小，因此无法创建画布和调整大小 呈现给迷你图。

解决方案是调用$ .sparkline_display_visible（）函数 任何时候都可以看到迷你图，以便可以 正确渲染。这是本网站用来处理 隐藏在不同选项卡式部分中的迷你图；网站 在制表符已更改的回调中调用例程。

该解决方案也包含在相同的引用文本中。您可以通过在选项卡按钮或tabpanel div上附加事件处理程序，并在选项卡首次激活时调用$.sparkline_display_visible()来实现此目的。

编辑：您可以通过以下方法快速进行测试：激活选项卡并在JS控制台中执行一次$.sparkline_display_visible()。