Tab Widget does not set class "ui-btn-active" for the initially opened tab

[thenewguy]

On page load the tab widget opens the first tab by default but it does not set the active class for this tab. See http://demos.jquerymobile.com/1.4.2/tabs/

You have to click the initially opened tab in order for it to highlight blue even though it is already opened

[thenewguy]

I posted this as a workaround but then I realized it isn't quite complete yet. The following sets the first tab as active, but when you click another tab both tabs are highlighted blue. It takes a third click to only have one selected tab.

(function($) {
    $(document).on('pagecontainerbeforeshow', function() {
        var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
        $('[data-role="tabs"] a:first', activePage).each(function(){
            $(this).click();
        });
    });
})(jQuery);

[thenewguy]

This seems to do the trick for me now. I didn't account for tab links not being in the first ul or tabs with multiple anchors if that is a possibility.

// workaround for the default tab not being visually identified as active
// see: https://github.com/jquery/jquery-mobile/issues/7407 
(function($) {
    $(document).on('pagecontainerbeforeshow', function() {
        var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
        $('[data-role="tabs"] ul:first', activePage).each(function(){
            var ul = this;
            var as = $('a', ul);
            $(as).click(function(){
                $(as).removeClass('ui-btn-active');
                $(this).addClass('ui-btn-active');
            });
            $(as).first().click();
        });
    });
})(jQuery);

[psyclone241]

Very nice workaround @thenewguy! A nice, simple fix to yet another odd issue in jqueryui mobile. Thank you, much appreciated!

[NguyenThai1976]

This seems to do the trick for me now. I didn't account for tab links not being in the first ul or tabs with multiple anchors if that is a possibility.

// workaround for the default tab not being visually identified as active
// see: https://github.com/jquery/jquery-mobile/issues/7407 
(function($) {
    $(document).on('pagecontainerbeforeshow', function() {
        var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
        $('[data-role="tabs"] ul:first', activePage).each(function(){
            var ul = this;
            var as = $('a', ul);
            $(as).click(function(){
                $(as).removeClass('ui-btn-active');
                $(this).addClass('ui-btn-active');
            });
            $(as).first().click();
        });
    });
})(jQuery);

Thank you very much. It works for me. My app run on smartphone BPhone (Made by Vietnam).