jquery ui选项卡使用jQuery选择时显示异常？

Question

我有一个简单的UI选项卡这样

<div id="tabs">    
<ul><li><a href="#tabs-1">Single</a></li><li><a href="#tabs-2">Matchmaker</a></li></ul></div> 

后来我使用jQuery的选项来选择一个标签

<script type="text/javascript">  
$(document).ready(
    function() { 
     var role = 1; //some value, this value changes and i'm sure its has its value. 
     $("#tabs").tabs("option", "selected", role); 
    } 
); 
</script> 

我甚至试过$("#tabs").tabs("option", "selected", 0);

，但没有运气..什么可能是错误？

Answer 1

你应该这样做：

$(document).ready(
    function() { 
     var role = 1; //some value, this value changes and i'm sure its has its value. 
     $("#tabs").tabs({ selected: role }); 
    } 
); 

小提琴这里：http://jsfiddle.net/6rB2w/1/

编辑 - 有一个与标记一个问题：看看这个小提琴正在工作：http://jsfiddle.net/6rB2w/11/

<div id="tabs">    
<ul><li><a href="#tabs-1">Single</a></li><li><a href="#tabs-2">Matchmaker</a></li></ul> 
    <div id="tabs-1"> 
     <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis.</p> 
    </div> 
</div> 

$(document).ready(
    function() { 
     var role = 1; //some value, this value changes and i'm sure its has its value. 
     $("#tabs").tabs(); 
     alert('now change the selected tab'); 
     $("#tabs").tabs("select", role); 
    } 
); 

问题是，第一个div必须环绕另外两个div，否则当你用$("#tabs").tabs("select", role);开启选项卡时，它会给出错误

Answer 2

正确的方法是.tabs('select', TAB-INDEX)（选项卡索引是从零开始的）。