我正在尝试使用 jquery mobile 创建一个带有持久页脚的 html 页面。这是我正在使用的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<div data-role="content" data-theme="b">
Home Page
</div>
<div data-role="footer" data-position="fixed" data-id="pFooter">
<div data-role="navbar">
<ul>
<li><a href="#home" data-icon="custom" class="ui-btn-active">Home</a></li>
<li><a href="#page2" data-icon="grid">Second page</a></li>
<li><a href="#page3" data-icon="star">Third page</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<div data-role="content" data-theme="b">
Second page
</div>
<div data-role="footer" data-position="fixed" data-id="pFooter">
<div data-role="navbar">
<ul>
<li><a href="#home" data-icon="custom">Home</a></li>
<li><a href="#page2" data-icon="grid" class="ui-btn-active">Second page</a></li>
<li><a href="#page3" data-icon="star">Third page</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<div data-role="content" data-theme="b">
Third page
</div>
<div data-role="footer" data-position="fixed" data-id="pFooter">
<div data-role="navbar">
<ul>
<li><a href="#home" data-icon="custom">Home</a></li>
<li><a href="#page2" data-icon="grid">Second page</a></li>
<li><a href="#page3" data-icon="star" class="ui-btn-active">Third page</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
以下用例说明了我面临的问题
1) 单击导航栏中的第二个按钮。
2) 第二页内容正常显示，第二个按钮保持选中状态。
3) 单击导航栏中的第一个按钮。
4) 首页内容正常，但第一个按钮未处于选中状态
5)再次单击第一个按钮。
6)现在第一个按钮处于选定状态。
您可以在此处查看此操作 - http://jsfiddle.net/tKMgd/
预先感谢您的帮助。
最佳答案
我遇到了这个问题，我知道这不是最漂亮的解决方案，但您可以绑定(bind)到每个页面的 pageshow (或 pagebeforeshow)事件，并让按钮的状态在 pageshow 上发生变化:
$(document).delegate('div[id*="events"]', 'pagebeforeshow',function(event){
$('#' + $(this).attr('id') + '_link').attr('class','ui-btn-active ui-btn ui-btn-up-a');
});
在此示例中，任何 id 中包含“events”的页面都会使带有该页面 id 加上“_link”(例如“events_link”)的链接处于事件状态。您可以使用与此类似的代码，使每个页面将事件类添加到页脚中的正确链接:
$(document).delegate('#home, #page2, #page3', 'pagebeforeshow',function(event){
$('#' + $(this).attr('id') + '_link').addClass('ui-btn-active');
});
注意:上述代码示例要求页脚中的链接具有 ID:home_link、page2_link、page3_link。这是您的 jsfiddle 的更新版本:http://jsfiddle.net/tKMgd/5/
关于jquery - jquery mobile 的导航栏中的选择未正确发生，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6569413/