我的HTML页面使用css实现标签。
我在'show'表格div中构建我所有的谷歌图表图表,之后我“隐藏”它们,当用户点击标签时,我用“隐藏”div替换html标签中正确的一个。
在谷歌浏览器和Firefox中它运行良好,但在IE浏览器中它不起作用:(
<div id="row1">
<br />
<table align="center" style="background-color:white">
<tr valign="top">
...
</tr>
<tr valign="top">
...
</tr>
</table>
<br />
</div>
<div id="row2">
<br />
<table align="center" style="background-color:white;">
<tr valign="top">
...
</tr>
<tr valign="top">
...
</tr>
</table>
<br />
</div>
<div class="col s12" id="dashboardtabs">
<ul class="tabs" style="background-color:#80CBC4" id="tabs">
<li class="tab col s3"><a id="titletab1" class="white-text" href="#tab1" onclick="reloadForTabs('titletab1')" style="background-color:#009688">Subjects Status</a></li>
<li class="tab col s3"><a id="titletab2" href="#tab2" class="white-text" onclick="reloadForTabs('titletab2')" style="background-color:#80CBC4">Stratification</a></li>
</ul>
</div>
<div id="tab1" class="col s12"></div>
<div id="tab2" class="col s12"></div>
我的js代码:
在第一次加载时将所有行div更改为显示 - 谷歌图表需要在show divs上构建支持用户设置(宽度,高等):
var emptyTabs = function()
{
titletabs.forEach(function (val) {
$('#tab' + val.slice(-1)).html('');
});
}
emptyTabs();
//Changed chart divs from hide to show
titletabs.forEach(function (val) {
$('#row' + val.slice(-1))[0].style.display = 'block';
});
用户选择标签后:
//Changed chart divs from show to hide
titletabs.forEach(function (val) {
$('#row' + val.slice(-1))[0].style.display = 'none';
});
//Display the selected tab (After filters, in the first load and etc.)
var selectedtab = document.getElementsByClassName('white-text active')[0].id;
$('#tab' + selectedtab.slice(-1)).html($('#row' + selectedtab.slice(-1)).html());
在IE中,“隐藏”div(不在标签中)中的图形显示正确,但是当html div插入标签时 - 数据为空,图表显示其所有属性但没有数据(条形图 - 没有酒吧)。
像这样:而不是这样:
在Google Chrome和IE浏览器中打开https://jsfiddle.net/wjqwd467/并查看其他内容......
有人可以帮助我吗?
谢谢!