我使用jQuery EasyUI标签创建了一些标签。 tab1的内容由href方法加载(我不想应用' iframe'方法),它可以很好地加载到Firefox中,但不能加载到其他浏览器中,例如IE或Chrome等。总是处于加载状态。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI Tabs Test</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="tabsDemo" style="margin-left:20px;width:1100px;height:400px">
<div title="default" class="easyui-layout" style="padding:10px">
<h2>Default tab</h2>
<table id="safett1" class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id'">id</th>
<th data-options="field:'task'">task</th>
<th data-options="field:'status'">status</th>
<th data-options="field:'question'">question</th>
</tr>
</thead>
</table>
</div>
<div title="tab1" class="easyui-layout" style="padding:10px">
hello world
</div>
<div title="tab2" class="easyui-layout" style="padding:10px">
I have 9 golden fish
</div>
</div>
<script type="text/javascript">
$(function(){
$('#tabsDemo').tabs({
onSelect: function(title, index) {
var tab = $('#tabsDemo').tabs('getSelected');
if(index == '1') {
$('#tabsDemo').tabs('update', {
tab: tab,
type:'all',
options: {
href: './tab1.html', //the new content URL
}
});
} else if(index == '2') {
$('#tabsDemo').tabs('update', {
tab: tab,
options: {
title:'newTab',
href: 'http://www.apple.com/', //the new content URL
}
});
} else {
return;
}
}
});
})
</script>
</body>
</html>
&#13;
<!-- tab1.html -->
<h2>Good students</h2>
<table id="safett2" class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id'">id</th>
<th data-options="field:'name'">name</th>
<th data-options="field:'description'">description</th>
<th data-options="field:'score'">score</th>
</tr>
</thead>
</table>
&#13;