1
https://jsfiddle.net/7xwrxkrd/JQuery와 모바일 - JQM은 패널 오버레이 후 활성 상태를 유지 1.4.5 네비게이션 바 없습니다
처음에 탭 하나가 설정되어 UI --btn을 활성 및 스타일 UI - 상태 - 계속 - 당신이 패널 햄버거 아이콘을 클릭하면 오버레이가 표시되고 탭 1을 클릭하면 탭 1이 여전히 활성화됩니다.
그러나 Tab Two를 선택한 다음 burger 아이콘을 클릭하여 패널 오버레이를 표시하면 Tab Two의 활성 상태가 사라집니다.
패널 오버레이를 사용하는 동안 탭을 활성 상태로 유지할 수있는 방법이 있습니까? 당신은 단순히 당신의 함수 내에서 핫픽스 $.mobile.activeClickedLink = null;을 넣어, 이미 어딘가에 코드 panelbeforeopen 콜백의 경우
$(document).on("panelbeforeopen", "div[data-role='panel']", function(e,ui) {
$.mobile.activeClickedLink = null;
});
:
<!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>