javascript - jQuery EasyUI tabs load by href, the tab content can not loaded in IE/Chrome browser etc. but can be loaded well in Firefox -
i created tabs using jquery easyui tabs. content of tab1 loaded href method(i not want apply 'iframe' method), can loaded in firefox well,but can not loaded in other browsers example ie or chrome etc. in loading... status. code follows：
<!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"> 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><!-- 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>
Comments
Post a Comment