How do I programmatically select a tab using jQuery Mobile?

Question

I am new to jQuery 1.4.3 and Mobile 1.10 and would like to use the tabs widget. I am wondering how to programmatically make a tab active?

Please see the JSFiddle. If I make the 2nd tab as active, the 2nd tab's content does not show until the 2nd tab is clicked.

<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

Can you not just click the element after adding an ID to the tabs themselves, using something like id="tab-one" and id="tab-two", respectively, then using the following Javascript?

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

Here it is in a working JSFiddle.

Answer 2

jQueryMobile bundles jQuery UI, so from the jQuery UI API docs: 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