带有JS的Bootstrap Tab-Pane

Question

我正在使用带有Bootstrap Tabbed-Panels的jQuery fullCalendar。

只有第一个有效，有些则没有。

当我取消选项卡式面板时，一切正常。

这是我的代码。

@foreach(something) <div class="tab-pane fade<?php if($count == 1) echo ' in active'; ?>"> <div class="panel panel-info"> <div class="panel-body"> <div id="calendar{{ $count }}"></div> </div> </div> <div class="clearfix"></div> <script type="text/javascript"> $(document).ready(function(){
$('#calendar{{ $count }}').fullCalendar(); </script> </div> @endforeach

Answer 1

除非可见，否则您无法呈现fullcalendar。

每当您更改标签时添加渲染调用：

http://fullcalendar.io/docs/display/render/

$('#my-tabs').tabs({
    activate: function(event, ui) {
        $('#calendar').fullCalendar('render');
    }
});