0

このプロジェクトには Bootstrap タブと Camera image スライダーがあります。ビデオニュース/画像ニュースという名前の 2 つのタブがあります。どちらにもサブタブがあります。サブタブは独自のカメラ スライダーを使用します。したがって、これの問題は、サブタブをクリックすると画像スライダーが壊れることです。必要なのは、画像スライダーを更新するか、スライダーをリロードして、適切な幅を取得できるようにすることです。

それで、これを行う適切な方法はありますか？

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"]タブのリンクに合わせて変更することを忘れないでください。

次の 2 つのイベントがあります。

  • shown.bs.tab- このイベントは、タブの表示時に発生しますが、新しいタブが表示される前です。と を使用event.targetしevent.relatedTargetて、それぞれアクティブなタブと以前のアクティブなタブ (利用可能な場合) をターゲットにします。
  • shown.bs.tab- このイベントは、タブが表示された後にタブ表示で発生します。と を使用event.targetしevent.relatedTargetて、それぞれアクティブなタブと以前のアクティブなタブ (利用可能な場合) をターゲットにします。

ご覧のとおり、アクティブなタブ ( e.releatedTarget) にアクセスすることで、スライダーを更新する必要があるコンテナーの ID を簡単に取得できます。

詳しくは「イベント」欄をご覧ください

于 2014-04-27T09:13:24.060 に答える