How can we programmatically select a tab in the jQuery Mobile navigation bar

Question

How can we programmatically select a tab in the jQuery Mobile navigation bar? I tried to make the code below. But to no avail.

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

UPDATE:

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

UPDATE:

Below is the code that I used to create the navigation bar in 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 --> 

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

Js

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

Answer 2

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

This trigger fires a click event, so you do not need to add or remove “active” tabs.