单击启动选项卡刷新

Question

在这个项目上有Bootstrap选项卡和Camera图像滑块。有两个名为"视频新闻"/"图片新闻"的选项卡。两者都有各自的子选项卡。子选项卡使用自己的"摄影机"滑块。所以这个问题是，当我点击子选项卡时，图像滑块会断裂。我需要的是刷新图像滑块或重新加载滑块，以便获得合适的宽度。

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

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

Answer 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。

查看"事件"部分了解更多