在jquery mobile的导航栏中选择不正确_Jquery_Html_Jquery Mobile

在jquery mobile的导航栏中选择不正确

jquery html jquery-mobile

在jquery mobile的导航栏中选择不正确,jquery,html,jquery-mobile,Jquery,Html,Jquery Mobile,我正在尝试使用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 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）现在第一个按钮处于选中状态

你可以在这里看到这一点-

提前感谢您的帮助。

我遇到了这个问题，我知道这不是最好的解决方案，但您可以为每个页面绑定

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中包含“事件”的任何页面都将使带有页面id的链接加上“_链接”（例如“事件_链接”）处于活动状态。您可以使用类似的代码使每个页面将活动类添加到页脚中的适当链接：

$(document).delegate('#home, #page2, #page3', 'pagebeforeshow',function(event){
    $('#' + $(this).attr('id') + '_link').addClass('ui-btn-active');
});

注意：上面的代码示例要求页脚中的链接具有ID:

home\u link

，

page2\u link

，

page3\u link

。这里是您的JSFIDLE的更新版本：

我遇到了这个问题，我知道这不是最漂亮的解决方案，但是您可以为每个页面绑定

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');
});

$(document).delegate('#home, #page2, #page3', 'pagebeforeshow',function(event){
    $('#' + $(this).attr('id') + '_link').addClass('ui-btn-active');
});

注意：上面的代码示例要求页脚中的链接具有ID:

home\u link

，

page2\u link

，

page3\u link

。以下是JSFIDLE的更新版本：

解决方案：

添加类ui状态持久化，ui btn处于活动状态

第2页

解决方案：

添加类ui状态持久化，ui btn处于活动状态

page2

添加“ui状态持久化”。请参见下面代码中的示例：

<div data-role="navbar" data-iconpos="top">
<ul>
    <li><a href="#page1" data-icon="home" class="ui-btn-active ui-state-persist">Home</a></li>
    <li><a href="#page2" data-icon="star">Favorite</a></li>
</ul>

添加“ui状态持久化”。请参见下面代码中的示例：

<div data-role="navbar" data-iconpos="top">
<ul>
    <li><a href="#page1" data-icon="home" class="ui-btn-active ui-state-persist">Home</a></li>
    <li><a href="#page2" data-icon="star">Favorite</a></li>
</ul>

我会将您接受的答案转换为Yoan DM的答案。现在，在jQM的最新版本中，这是解决此问题的正确方法。我会将您接受的答案转换为Yoan DM的答案。现在，在jQM的最新版本中，这是解决此问题的正确方法。