0

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

那么有什么合适的方法可以做到这一点吗？

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
4

1 回答 1

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。

查看“活动”部分了解更多信息

于 2014-04-27T09:13:24.060 回答