Jquery UI标签页,以编程方式切换到新标签页

前端之家收集整理的这篇文章主要介绍了Jquery UI标签页,以编程方式切换到新标签页前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在建立一个“退房”像交互与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);    
});

JSBin Example

原文链接:https://www.f2er.com/jquery/184307.html

猜你在找的jQuery相关文章