1

https://jsfiddle.net/7xwrxkrd/

Initially Tab One is set with ui-btn-active and ui-state-persist styles - if you click the burger icon the panel overlay is revealed and if you click away Tab One is still active.

But if you select Tab Two and then click the burger icon to show the panel overlay the Tab Two loses its active state.

Is there a way I can keep the Tabs Active while using the panel overlay?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>

    <body>
        <div data-role="page">

            <div data-role="header" data-position="fixed" data-fullscreen="false">
                <a href="#panel-overlay" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-bars">Menu</a>
                <h1>Demo</h1>
            </div>

            <div data-role="tabs" id="tabs" style="padding:0px;">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#one" class="ui-btn-active ui-state-persist">Tab One</a></li>
                        <li><a href="#two">Tab Two</a></li>
                        <li><a href="#three">Tab Three</a></li>
                    </ul>
                </div>

                <div id="one" class="ui-content" date-role="content">
                    <p>First tab Content</p>
                </div>

                <div id="two" class="ui-content" date-role="content">
                    <p>Second tab contentnt</p>
                </div>

                <div id="three" class="ui-content" date-role="content">
                    <p>Thrid tab contentnt</p>
                </div>
            </div>

            <div data-role="panel" id="panel-overlay" data-display="overlay">
                <ul data-role="listview">
                    <li><a href="#">Menu 1</a></li>
                    <li><a href="#">Menu 2</a></li>
                </ul>
            </div>

        </div>
    </body>
</html>
Merlin
  • 43
  • 1
  • 10
  • at https://api.jquerymobile.com/tabs/ it says: Note: Use of links to open popup's and panels is not currently recommended in conjunction with the tabs widget. Clicking these links will remove the active state style of the selected tab. -> @deblocker 's solution worked for me – womd Apr 11 '18 at 06:50

1 Answers1

2

Here is a generic fix for this issue:

$(document).on("panelbeforeopen", "div[data-role='panel']", function(e,ui) {
    $.mobile.activeClickedLink = null;
});

If you have already somewhere in your code the panelbeforeopen callback, simply put the hotfix $.mobile.activeClickedLink = null; inside your function.

deblocker
  • 7,629
  • 2
  • 24
  • 59