所以我正在使用Twitter的Bootstrap创建一个带有标签内容的页面,但我的开始活动div的内容总是与我的其他标签的内容不同.例如,我在不同的选项卡中使用highcharts.js放入图表,但活动的一个总是正确显示而其他的宽度不正确.
看看下面的例子:
<div class = "row-fluid">
<div class = "span9">
<div class = "row-fluid">
<h3>Test</h3>
<ul class="nav nav-tabs">
<li class = "active">
<a data-toggle = "tab" href = "#one">One</a>
</li>
<li><a data-toggle = "tab" href = "#two">Two</a></li>
<li><a data-toggle = "tab" href = "#three">Three</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="one" >
<h4>One</h4>
<div id = "container1"></div>
<script type = "text/javascript">
$(function () {
$('#container1').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', …有没有人一起使用了tabs(jquery-ui-1.8.9)和饼图Highcharts 2.1.4？简单来说,我有多个标签,每个标签显示一个包含不同数据的饼图.图表会渲染到div,但是当我点击第二个标签时,图表会以某种方式显示300px在它所假设的位置的右侧.每当我放大或缩小浏览器窗口时,图表都会返回到校正位置.
我的代码:
//假设数字选项卡是基于变量$ count生成的,并且有2个选项卡
<script type="text/javascript">
var chart_tab_<?=count?>;
$(document).ready(function() {
chart_tab_<?=count?> = new Highcharts.Chart({
chart: {
renderTo: 'chart_tab_<?=count?>',
// blah blah
}
<body>
<div id="chart_tab_<?=count?>"></div>
</body>
再次,图表呈现,但在第二个选项卡上显示错误.
更新:我知道这个KIND OF解决了这个问题:
<script type="text/javascript">
$(document).ready(function() {
$( "#tabs" ).tabs({
cookie: { expires: 1 }
});
$( "#tabs" ).tabs({
select: function(event, ui) { window.location.reload(); }
});
});
但它真的很糟糕,因为每次用户点击选项卡时都必须重新加载页面.任何想法都会很棒.