Twitter Bootstrap和Javascript中的活動標籤加載

我正在使用Twitter Bootstrap標籤式內容，但加載其他JavaScript庫時出現問題。本質上，允許在地圖上縮放的JavaScript不會加載，除非它包含的選項卡是「活動」。我猜它與它不可見或DOM的一部分有關，但我對DOM和JavaScript加載的理解很少。Twitter Bootstrap和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加載內容，但我喜歡當前的設置，並且很樂意使這項工作。

來源

2012-08-29 ghukill

你能告訴我們更多關於你的*改變圖像腳本*嗎？ –

腳本還將如何區分圖像？我沒有看到圖像上的ID ... –

我更新了示例代碼以反映每個圖像的ID。該腳本是名爲SmoothZoom的第三方庫。所以我明白診斷這可能是不可能的，如果沒有篩選。並感謝您的幫助。 – ghukill

謝謝你的幫助克里斯，你給了我繼續的力量。認爲我解決了它，但我打賭還是有一個更簡單的方法。我做了以下：

1）爲每個地圖/腳本中定義的功能：

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

2）中加入以下腳本每個標籤導航鏈接下：

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

以這種方式，該當包含圖像的選項卡被加載時，腳本執行正確。仍然不確定是否「顯示：無」是罪魁禍首，但它的工作原理。

來源

2012-08-30 14:18:50 ghukill

幹得好 - 這實際上是我接下來要提出的建議 - 在標籤被選中時運行smoothZoom ... –

Twitter Bootstrap和Javascript中的活動標籤加載

回答

相關問題