How can we programmatically select a tab in Nav bar of JQuery Mobile

问题

How can we programmatically select a tab in Nav bar of JQuery Mobile? I tried the below code to do that. But of no use.

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

UPDATE:

Please Check this: http://jsfiddle.net/YnxML/15/

UPDATE:

Following is the code I have used to develop a Navigation bar at the footer.

<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 -->

回答1:

Live Link: 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();

回答2:

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

This trigger will fire click event hence do not require to add or remove "active" from tabs.

来源：https://stackoverflow.com/questions/6407868/how-can-we-programmatically-select-a-tab-in-nav-bar-of-jquery-mobile

标签

jquery-mobile

navbar