3

Bootstrap のポップオーバー内で使用すると、Bootstrap のタブが機能しないようです。

何が起こるかは次のとおりです。

 1. Popover opens
 2. Active tab on click changes
 3. Tab content is not changing <-- PROBLEM

タブは正しく作成され、ポップオーバーの外で試してみると正常に動作します。

<a class="btn" id="btnPopover" href="#">Launch Popover</a>
<div class="tabbable hide" id="popoverContent">
<ul class="nav nav-tabs">
    <li class="tab active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li class="tab"><a href="#tab2" data-toggle="tab">Tab 2</a></li>
    <li class="tab"><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>
<div class="tab-content" style="padding-top: 15px">
    <div class="tab-pane active" id="tab1">Tab Content 1</div>
    <div class="tab-pane" id="tab2">Tab Content 2</div>
    <div class="tab-pane" id="tab3">Tab Content 3</div>
</div>


$(function () {
 $("#btnPopover").popover({
  html: true,
  trigger: 'click',
  title: "Title",
  placement: "bottom",
  content: $("#popoverContent").html()
 });
});

この場合、ブートストラップで発生しているように見えるのは、要素が複製されることです。コンテンツ タブ内の要素にさらに JavaScript ライブラリとプラグインを使用することを計画しましたが、誰かが確実な回避策を提供しない限り、これはほとんど不可能です。正直なところ、これは有効な Bootstrap のバグだと思います。

jsfiddle デモ: http://jsfiddle.net/iboros/nCfBf/

4

1 に答える 1

7

オプション1：

既存のタブを削除し、その HTML コンテンツを取得します。

$("#btnPopover").popover({
    html: true,
    trigger: 'click',
    title: "Title",
    placement: "bottom",
    content: $('#popoverContent').remove().html()
});

デモ

オプション 2:

id セレクターの代わりにタブにクラス セレクターを使用する

すなわち

<a href=".tab2" data-toggle="tab">Tab 2</a>

それ以外の

<a href="#tab2" data-toggle="tab">Tab 2</a>

HTML

<div class="tabbable hide" id="popoverContent">
     <ul class="nav nav-tabs">
        <li class="active"><a href=".tab1" data-toggle="tab">Tab 1</a></li>
        <li class="tab"><a href=".tab2" data-toggle="tab">Tab 2</a></li>
        <li class="tab"><a href=".tab3" data-toggle="tab">Tab 3</a></li>
    </ul>
    <div class="tab-content" style="padding-top: 15px">
        <div class="tab-pane active tab1" >Tab Content 1</div>
        <div class="tab-pane tab2">Tab Content 2</div>
        <div class="tab-pane tab3" >Tab Content 3</div>
    </div>
</div>
<a class="btn" id="btnPopover" href="#">Launch Popover</a>

デモ

于 2013-06-01T05:56:28.870 に答える