选择不当发生在导航栏在jQuery Mobile的

我试图创建使用jQuery mobile.This持续页脚HTML页面是我使用的代码：选择不当发生在导航栏在jQuery Mobile的

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

感谢。

来源

2011-07-04 user700284

我会切换你接受的答案Yoan DM的答案。现在是在最新版本的jQM中解决此问题的正确方法。 –

我有过这样的问题，我知道这是不是最漂亮的解决方案，但可以绑定到的每一页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'); 
});

注：上面的代码示例要求在页脚中的链接有IDS：home_link， page2_link，page3_link。这是你的jsfiddle的更新版本：http://jsfiddle.net/tKMgd/5/

来源

2011-07-04 20:28:06 Jasper

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

添加类UI状态，坚持用UI的BTN-活跃

第2页

来源

2012-02-20 09:21:48

添加“ 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>

来源

2012-07-12 16:41:21

选择不当发生在导航栏在jQuery Mobile的

回答

相关问题