0

タブ付きコンテンツにTwitterBootstrapを使用していますが、別のjavascriptライブラリの読み込みに問題があります。基本的に、マップのズームを可能にするjavascriptは、マップが含まれているタブが「アクティブ」でない限りロードされません。見えない、またはDOMの一部と関係があると思いますが、DOMとJavaScriptの読み込みについての私の理解はごくわずかです。

基本構造：

<div class="tab-content">
<div class="tab-pane" id="1">
     <script>....</script>
     <div id="zoom_container">
          <img src="..."/ id="bradley"> #the script alters this image
     </div>
</div>
<div class="tab-pane active" id="2">
     <script type="text/javascript">
       $('#second').ready(function($){
       $('#monde').smoothZoom({
        width:888,
        height:250                      
         })
        });
     </script>
     <div id="zoom_container2">
         <img src="..."/ id="monde"> #the script alters this image
     </div>
</div>

「アクティブ」な「タブペイン」のコードは問題なく読み込まれますが、タブをクリックして他のペインに移動しても、画像はjavascriptによって変更されません。何かご意見は？タブの読み込み方法の結果ですか？

私が考えることができる唯一の選択肢は、Ajaxを使用してコンテンツをロードすることですが、私は現在のセットアップが好きで、これを機能させたいと思っています。

4

1 に答える 1

0

クリスの助けに感謝します、あなたは私に続ける力を与えてくれました。私はそれを解決したと思いますが、もっと簡単な方法があるに違いありません。私は次のことをしました：

1）各マップ/スクリプトに定義された関数：

function tour1Map(){
$('#bradley').smoothZoom({
    ...
    });
};

2）各タブナビゲーションリンクの下に次のスクリプトを追加しました。

<a href="#tour1_pane" data-toggle="tab" id="tour1">Link Text</a>
<script>
    $("#tour1").click(function() {
        tour1Map();
    }); 
</script>

このように、スクリプトは、画像を含むタブがロードされたときに実行されます。「display：none」が原因かどうかはまだわかりませんが、機能します。

于 2012-08-30T14:18:50.037 に答える