jQuery Mobile default tab - jquery-mobile

Question

I want to set a default tab in jQuery Mobile.
My source code:
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
<h1>First tab contents</h1>
</div>
<div id="two">
<ul data-role="listview" data-inset="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
</div>
$("#tabs").tabs({ active: 0 });
It worked but has no background color, because the first tab is not actually clicked.
I want to set default tab with background when I login in.
No background color demo

Answer 1

To set the active tab, try:
$( "#tabs" ).tabs("option", "active", 1);
Here is a working DEMO
UPDATE: the blue background on the tab button comes from the class ui-btn-active. Either add this class to the button, or instead of setting the active tab, trigger the click event on the appropriate button: http://jsfiddle.net/ezanker/c29gd4h6/1/

Answer 2

I have added class="ui-btn-active" in first tab-li
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div><!-- /navbar -->
If not work then try below It working for me when page load only I mean refresh page in browser
Put following code in jquerymobile pagecreate event that will make every first tab selected
$('[data-role="tabs"] a:first').each(function() {
$(this).click();
});
I had put above lines into pagecreate event
$(document).on("pagecreate", "#homepage", function(event) {
$('[data-role="tabs"] a:first').each(function() {
$(this).click();
});
});
In above line #homepage is my page id and pagecreate is event of jquery-mobile that fire when page load/init

Answer 3

HTML
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li>Default</li>
JS
$(document).on("pagecreate", function (event) {
$('#tab-one').trigger('click');
});

Answer 4

I found the existing mentioned solutions had issues:
the one by #ezanker showed the content but didn't set the tab button as active
the one by #Devendra Chhaiya clicked any first link that the tab content contained also! :-)
I also found that the tab wasn't remaining selected when coming back to that page, so I used this solution to fix that too.
there was also an issue with pages loading into tab content, so I had to fix that too
in addition (yes, there's more :-) I wanted to selected a specific tab based on the requirements of that specific page, so I added a class select-this-tab on page generation from the server.
So I modified the one by #Devendra Chhaiya to click only the actual tab button (and not any tab content, keep the tab selected, and also prevent content loading into the tab area. I had to move the trigger from pagecreate to pageinit for it to work:
/*
* https://stackoverflow.com/questions/13837304/jquery-ui-non-ajax-tab-loading-whole-website-into-itself/17384908#17384908
*/
jQuery(function () {
jQuery('base').remove();
jQuery("#tabs").tabs();
});
$(document).on('pageinit', function () {
console.log('pageinit');
/*
* Ensure the correct tab of a set is selected (and only once)
* https://stackoverflow.com/questions/25336233/jquery-mobile-default-tab/64080164#64080164
*/
$('[data-role="tabs"] [data-role="navbar"] ul li.select-this-tab').each(function () {
console.log('Clicking tab');
$(this).removeClass("select-this-tab").find("a").click();
});
/*
* Ensure a tab REMAINS selected when coming back to that page.
* https://stackoverflow.com/questions/16752704/tab-active-state-in-jquery-mobile/23725612#23725612
*/
$('div[data-role="tabs"] [data-role="navbar"] a').click(function (e) {
e.preventDefault();
$('div[data-role="tabs"] [data-role="navbar"] .ui-btn-active').removeClass('ui-btn-active ui-state-persist');
$(this).addClass('ui-btn-active ui-state-persist');
});
You can remove the console.log lines which you can just use to prove the code actually fires.