0

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

我尝试使用来自 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>

那么......当被调用页面上显示不同的选项卡时，如何调整颜色框的大小以及我应该在哪个页面放置脚本？

谢谢

4

3 回答 3

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();
  });
});
于 2014-05-22T01:55:06.333 回答
0

试着把脚本放在里面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

于 2013-05-27T14:00:42.940 回答
0

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

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    e.target; // activated tab
    e.relatedTarget; // previous tab
    $.colorbox.resize();
})
于 2014-07-05T23:58:26.260 回答