0

我正在将 Twitter Bootstrap 用于选项卡式内容，但在加载另一个 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 回答