引导选项卡在单击时刷新答案

【问题标题】：Bootstrap tab refresh on click引导选项卡在单击时刷新
【发布时间】：2014-04-27 08:51:36
【问题描述】：

在这个项目上有引导选项卡和相机图像滑块。有两个名为视频新闻/图片新闻的选项卡。两者都有自己的子标签。子选项卡使用自己的相机滑块。所以这个问题是当我点击子标签时，图像滑块被破坏了。我需要的是刷新图像滑块或重新加载滑块，以便它们获得适当的宽度。

那么有什么合适的方法吗？

Tab.active -> Sub tab -> Slider /on first it's ok/
           -> Sub tab -> Slider /Click on sub tab it breaks/
           -> Sub tab -> Slider
Tab        -> Sub tab -> Slider /all breaks/
           -> Sub tab -> Slider /Click on sub tab it breaks/
           -> Sub tab -> Slider

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-tabs

【解决方案1】：

您必须将事件附加到选项卡并在必要时呈现相机滑块。

基本上，您在代码中插入类似这样的内容

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  // refresh the slider
})

记得更改a[data-toggle="tab"] 以匹配您的标签链接。

您有两个可用的事件：

shown.bs.tab - 此事件在标签显示时触发，但在新标签显示之前。使用 event.target 和 event.relatedTarget 分别定位活动标签和上一个活动标签（如果可用）。
shown.bs.tab - 显示选项卡后在选项卡显示上触发此事件。使用 event.target 和 event.relatedTarget 分别定位活动标签和上一个活动标签（如果可用）。

如您所见，通过访问活动选项卡 (e.releatedTarget)，您可以简单地获取需要刷新滑块的容器的 ID。

Look at the "Events" section for more

【讨论】：