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>