Question

我是jquery mobile的新手，想要使用标签小部件。我想知道如何以编程方式使标签激活？请参阅jsfiddle。如果我将第二个标签设为有效，则在单击第二个标签之前，第二个标签的内容不会显示。

<div data-role="page">
    <div data-role="tabs">
        <div data-role="navbar">
            <ul>
                <li><a href="#one">one</a>
                </li>
                <li><a href="#two" class="ui-btn-active">two</a>
                </li>
            </ul>
        </div>
        <div class="ui-content" id="one">tab one content</div>
        <div class="ui-content" id="two">tab two content</div>
    </div>
</div>

谢谢！

Answer 1

您是否可以在分别使用id="tab-one"和id="tab-two"之类的内容向标签添加ID之后单击该元素，然后使用以下Javascript？

$('#tab-two').trigger('click');

这是一个有效的JSFiddle。

Answer 2

jQueryMobile捆绑了jQuery UI，因此来自jQuery UI API文档：http://api.jqueryui.com/tabs/

var tab_index = 1; // the zero based index of tab #two
$("div.tabs").tabs( "option", "active", tab_index ); // tab_index is zero-based

Answer 3

我不是JQuery-Mobile的人，但只需要@Jeff's代码。我刚刚添加了一些代码以使其动态化：DEMO。

您也可以参考this QA thread了解更多信息......

$(function(){

// Selectors
var tabs = 'div[data-role="navbar"]';
var tab = tabs + ' a';

// activate the selcted tab on load
activateTab();

// fetch the closest selected tab and trigger click
function activateTab(){
    var selected = $(tab).closest('.ui-btn-active');
    $(selected).trigger("click");
} });

Answer 4

当您使用多个页面和trasition时，尝试激活选项卡并不容易。在trasition期间，“ui-btn-active”类被删除。因此，如果您想在显示页面之前选择一个标签（例如pagebeforeshow），请改用此功能：

function selectTabInNavbar(tabs, nr){
    $( tabs ).tabs( "option", "active", nr );
    $( tabs + " [data-role=navbar] a" ).eq( nr ).addClass("ui-btn-active");
}

其中tabs是<div data-role="tabs">容器的选择器，nr是所需选项卡的编号（从索引0开始）。

Answer 5

查看我使用jQuery Mobile选项卡时必须解决的所有问题的完整解决方案here！

如何使用JQuery mobile以编程方式选择选项卡？

5 个答案: