Question

我有一个页面/表单我正在加载到彩盒中。该页面包含标签部分。选项卡在颜色框中运行良好，但是一旦显示新选项卡，我需要调整颜色框的大小。

我尝试过使用twitter bootstrap中的示例代码：

<script>
$('a[data-toggle="tab"]').on('shown', function (e) {
    e.target; // activated tab
    e.relatedTarget; // previous tab
    alert($(e.target).attr('href'));
    colorbox.resize();
})
</script>

我把它放在调用表单的主页面中但是没有被触发。我认为这是因为在调用之前表格不存在，但是颜色框。

我已将脚本添加到包含工作标签的被调用页面/表单中，但似乎没有任何内容被触发。

我的标签标记为：

<div class="tabbable tabs-left">
     <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">File/Image Upload</a></li>
        <li><a href="#tab2" data-toggle="tab">Images</a></li>
        <li><a href="#tab3" data-toggle="tab">Files</a></li>
     </ul>
     <div class="tab-content">
        <div class="tab-pane active" id="tab1">content</div>
        <div class="tab-pane active" id="tab2">content</div>
        <div class="tab-pane active" id="tab3">content</div>
     </div>
</div>

那么......如果在被调用页面上显示不同的选项卡以及我应该将脚本放在哪个页面上，如何调整colorbox的大小？

由于

Answer 1

这应该有效：

$(function(){
  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    e.target // activated tab
    e.relatedTarget // previous tab
    alert($(e.target).attr('href'));
    colorbox.resize();
  });
});

Answer 2

尝试将脚本放在ready

中

$(function(){

$(document).on('shown', 'a[data-toggle="tab"]', function (e) {
    e.target; // activated tab
    e.relatedTarget; // previous tab
    alert($(e.target).attr('href'));
    colorbox.resize();
})

});

演示：Plunker

Answer 3

在Bootstrap 3中，以下代码正确调整开关选项卡上Colorbox窗口的大小：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    e.target; // activated tab
    e.relatedTarget; // previous tab
    $.colorbox.resize();
})

twitter bootstrap没有触发显示的事件

3 个答案: