我们如何以编程方式在 JQuery Mobile 的导航栏中选择一个选项卡答案

【问题标题】：How can we programmatically select a tab in Nav bar of JQuery Mobile我们如何以编程方式在 JQuery Mobile 的导航栏中选择一个选项卡
【发布时间】：2011-06-20 07:07:37
【问题描述】：

我们如何以编程方式在 JQuery Mobile 的导航栏中选择一个选项卡？我尝试了下面的代码来做到这一点。但是没用。

var tabButton = document.getElementById("tabId2");
tabButton.className = "ui-btn-active";

更新：

请检查：http://jsfiddle.net/YnxML/15/

更新：

以下是我用来开发页脚导航栏的代码。

<div data-role="page" data-theme="b" id="option-page">
<div data-role="footer" data-id="foo1" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#" id ="tabId1"onclick="method1();" >1</a></li>

        <li><a href="#" id ="tabId2" onclick="method2();"  >2</a></li>
        <li><a href="#" id ="tabId3" onclick="method3();">3</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

【问题讨论】：

该代码在 Chrome 中的 jsfiddle 上运行（虽然风格有点偏离），你在手机上看到了什么？只是根本不改变标签吗？
Yes Town.....它不会改变选项卡选择..

标签： jquery-mobile navbar

【解决方案1】：

直播链接：http://jsfiddle.net/YnxML/24/

HTML

<div data-role="page" data-theme="b" id="option-page">
    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#" id ="tabId1"onclick="method1();" >1</a></li>
                <li><a href="#" id ="tabId2" onclick="method2();"  >2</a></li>
                <li><a href="#" id ="tabId3" onclick="method3();">3</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>

$('#tabId1').removeClass('ui-btn-hover-b').addClass('ui-btn-up-b');
$('#tabId2').addClass('ui-btn-active');

$('#option-page').page();

【讨论】：

Phill..太棒了..谢谢..您在 JQM 方面表现出色..为我提出的所有问题提供解决方案..:)
你能解释一下这行发生了什么吗：$('#tabId1').removeClass('ui-btn-hover-b').addClass('ui-btn-up-b') ;
它删除不需要的类并添加需要的类。如果您查看 chromes 开发工具或 firebug，您可以看到 jQM 添加的类（即使您悬停、单击等...）。只需找到所需的类（看）。这是细分： $('#tabId1') ,
谢谢菲尔..这回答了我的问题。 :)

【解决方案2】：

$("#tabId").trigger("click");

此触发器将触发点击事件，因此不需要在选项卡中添加或删除“活动”。

【讨论】：