所有
我已经嵌套了JQuery UI标签。我想为嵌套选项卡实现reloadTab功能。目前,以下代码具有嵌套选项卡的静态片段,但最终它们将具有URL,因此选项卡可以表现为ajax选项卡。如何实现reloadTab功能?
<html>
<head>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#tabContainer').tabs({ selected: 0 });
$('#fragment-1').tabs({ selected: 1 });
});
function reloadTab(tabindex)
{
var smalltabs = $('#fragment-1').tabs({cache:false, spinner:'',selected:0});
$('#tabContainer').tabs('load', smalltabs.tabs('option','selected'));
$('#fragment-1').tabs('load', tabindex);
}
</script>
</head>
<body>
<div id="tabContainer">
<ul>
<li><a href="#fragment-1"><span>TAB1</span></a></li>
<li><a href="#fragment-2"><span>TAB2</span></a></li>
<li><a href="#fragment-3"><span>TAB3</span></a></li>
</ul>
<div id="fragment-1">
<ul class="innerNav" >
<li><a href="#fragment-1a"><span>INNERTAB1</span></a></li>
<li><a href="#fragment-1b"><span>INNERTAB2</span></a></li>
</ul>
<div id="fragment-1a" class="innerFragment">Content of inner tab 1</div>
<div id="fragment-1b" class="innerFragment">Content of inner tab 2
<br><a href="Javascript:reloadTab(1);">Reload tab content</a></div>
</div>
<div id="fragment-2"></div>
<div id="fragment-3"></div>
</div>
</body>
</html>
由于
答案 0 :(得分:1)
来自docs:
var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0
修改强>
我复制了您的文件,并进行了以下更改:
将重新加载链接更改为:
href="#" id="reload"
(markdown不断将我的锚标记转换为链接)
$(function() { $('#tabContainer').tabs({ selected: 0 }); $('#fragment-1').tabs({ selected: 0 }); $('#reload').click(function(){ var $tabs = $('#fragment-1').tabs(); reloadTab($tabs.tabs('option', 'selected')); }); }); function reloadTab(tabindex) { //alert(tabindex); //un-comment for proof. var smalltabs = $('#fragment-1').tabs({cache:false, spinner:'',selected:0}); $('#tabContainer').tabs('load', smalltabs.tabs('option','selected')); $('#fragment-1').tabs('load', tabindex); }