Question

我已根据SlidesJS创建了3个图片库，并将它们放在Twitter Bootstrap Tabs内。

您可以在此处看到demo。

如您所见，图库已正确填充并放置在标签内;但是，不显示第二和第三个图库的图像。

我猜这可能是隐藏了标签内容并与图库css冲突的内容？

你有解决方案吗？

答案：

根据以下建议，我最终以这种方式使用它：

$(document).ready(function(){
    $('#slides0').slidesjs({ width: 918, height: 200, navigation: false });
    $("#gallery-tab a").each(function( index ) {
        $(this).on('shown', function(){
            $('#slides' + index).slidesjs({ width: 918, height: 200, navigation: false });
        });
    });
});

Answer 1

大多数标签方案最常见的问题是，当隐藏标签时，您正在初始化图库，因此插件无法计算尺寸并对不可见的标签子元素执行其他操作。

您可以1）在选项卡上初始化图库插件，或者2）使用{position: absolute; left: -999em;}而不是{display: none}来隐藏标签。

更新：根据您的评论，这应该有用......

$('#gallery-tab a:first[data-toggle="tab"]').on('shown', function () {
   $('#slides0').slidesjs({ width: 918, height: 200, navigation: false });
})

在Twitter Bootstrap选项卡中使用多个图像库

1 个答案: