Question

我正在尝试使用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/

提前感谢您的帮助。

Answer 1

我遇到过这个问题，我知道这不是最漂亮的解决方案，但您可以为每个页面绑定pageshow（或pagebeforeshow）事件，并在{{更改按钮状态1}}：

pageshow

在此示例中，id中包含“events”的任何页面都将使页面ID加“_link”（例如“events_link”）的链接处于活动状态。您可以使用与此类似的代码使每个页面将活动类添加到页脚中的正确链接：

$(document).delegate('div[id*="events"]', 'pagebeforeshow',function(event){
    $('#' + $(this).attr('id') + '_link').attr('class','ui-btn-active ui-btn ui-btn-up-a');
});

注意：上面的代码示例要求您的页脚中的链接包含ID：$(document).delegate('#home, #page2, #page3', 'pagebeforeshow',function(event){ $('#' + $(this).attr('id') + '_link').addClass('ui-btn-active'); });，home_link，page2_link。以下是您的jsfiddle的更新版本：http://jsfiddle.net/tKMgd/5/

Answer 2

解决方案：http://jquerymobile.com/blog/2011/03/31/jquery-mobile-alpha-4-released/

使用ui-btn-active

添加类ui-state-persist

第2页

Answer 3

添加“ui-state-persist”。请参阅以下代码中的示例：

<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>

在jquery mobile的navbar中没有正确选择选择

3 个答案: