Question

在这个项目中有Bootstrap选项卡和Camera image滑块。有两个名为Video news / Picture news的标签。两者都有他们的子标签。子选项卡使用自己的相机滑块。所以这个问题就是当我点击subtabs时图像滑块正在断开。我需要的是刷新图像滑块或重新加载滑块，以便它们得到适当的宽度。

那么有没有正确的方法呢？

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。

Look at the "Events" section for more

单击“引导”选项卡刷新

1 个答案: