jQuery Mobile default tab

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><a href="#one" id="tabId1" data-ajax="false">one</a></li>
      <li><a href="#two" data-ajax="false">two</a></li>
      <li><a href="ajax-content.html" data-ajax="false">three</a></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><a href="#">Acura</a></li>
        <li><a href="#">Audi</a></li>
        <li><a href="#">BMW</a></li>
        <li><a href="#">Cadillac</a></li>
        <li><a href="#">Ferrari</a></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><a href="a.html" class="ui-btn-active">One</a></li>
        <li><a href="b.html">Two</a></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><a href="#one" id="tab-one" data-ajax="false">Default</a></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.