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)（标签索引从零开始）。

使用jquery选择时，jquery ui tabs显示异常？

2 个答案: