我正在构建一个“签出”,就像与jQuery UI选项卡交互一样.这意味着单击第一个选项卡上的按钮将停用第一个选项卡并移至下一个选项卡.我一直在梳理Stack Overflow上的帖子,但我尝试的任何东西似乎都没有用.我正在使用jQuery UI 1.8,这里是代码：
<script type="text/javascript">
$(document).ready(function() {
var $tabs = $('#tabs').tabs({ selected: 0 });
$tabs.tabs('option','selected',0);
$("#tabs").tabs({disabled: [1,2]});
$("#addstudent").click(function(){
$tabs.tabs('option',1);
$("#tabs").tabs({disabled: [0,2]});
});
$("#confirm").click(function(){
$tabs.tabs('option',2);
$("#tabs").tabs({disabled: [0,1]});
});
});
</script>
<div id="tabs">
<ul>
<li><a href="#fragment-1">Student Information</a></li>
<li><a href="#fragment-2">Confirmation</a></li>
<li><a href="#fragment-3">Invoice</a></li>
</ul>
<div id="fragment-1">
<button id="addstudent" >Add Student</button>
</div>
<div id="fragment-2">
<button id="confirm" >Confirm</button>
</div>
<div id="fragment-3">
tab 3,index 2
</div>
</div>
当我单击按钮时,下一个选项卡将被解锁(因为它是可选的)但它不会禁用索引0处的选项卡并切换到索引1处的选项卡.此外,相应的面板不会显示.
解决方法
尝试将代码更改为：
var $tabs = $('#tabs').tabs({ selected: 0,disabled: [1,2] });
$("#addstudent").click(function(){
$tabs.tabs('enable',1).tabs('select',1).tabs('disable',0);
});
$("#confirm").click(function(){
$tabs.tabs('enable',2).tabs('select',2).tabs('disable',1);
});
