Mobile Jquery移动用户界面btn在导航栏中处于活动状态

4天来，我一直在努力让它发挥作用，但运气不好

我有一个非常简单的jquery移动应用程序。 该应用程序有页眉、内容和页脚。 页脚是在“pagecreate”事件中动态生成的，因为它总是相同的，我不想在每个页面中都包含它的HTML

所以我做了这样的事情：

$(document).delegate('[data-role="page"]', 'pagecreate', function (e) {
DrawHeader($(this));
DrawFooter($(this));
SetFooterEvents($(this));
SetActiveFooter($(this));

}))

DrawHeader（）和DrawFooter（）只需将页眉div前置到页面并附加页脚div即可。 SetFooterEvents（）设置页脚导航栏按钮的onclick事件，SetActiveFooter（）将ui btn设置为当前活动的页脚链接。 为此，我将data-active-footer属性添加到page-div中，并将data-name属性添加到navbar元素中。我正在根据页面中的数据活动页脚搜索当前元素，并应用ui btn活动类

function SetActiveFooter(page) {
page.children('div[data-role="footer"]')
    .find('a[data-name="' + page
        .attr("data-active-footer") + '"]').addClass("ui-btn-active");}

到目前为止还不错

现在，假设我已更改为一个页面，导航栏点亮（它已成功接收ui btn活动类），并且我正在单击上一页，导航栏中点亮的项目不会更改回原来的页面！
如果我再次单击页面（即：更改为第二页[corrent light]，更改回第一页[second page仍然点亮]，然后再次单击第一页），则导航栏按钮会点亮

我发现，当我在“pagecreate”事件中更改当前页面的导航栏时，jqm也更改了上一页的导航栏。 我尝试使用“pageshow”事件覆盖此行为，也就是说，尝试将ui btn活动类应用于导航栏中的当前元素，但问题是“pageshow”事件中的$（this）和e.currentTarget对象不包含FOOTER元素

$(".ui-page").live('pageshow', function (e) {
alert($(this).children('div').length); // returns 2!
alert($(this).children('div[data-role="footer"]').length); //returns 0

alert($(e.currentTarget).children('div').length); // returns 2!
alert($(e.currentTarget).children('div[data-role="footer"]').length); //returns 0});

有什么想法吗

---

谢谢。

在深入了解更多详细信息之前，请尝试添加.ui state persistent和.ui btn active

这样可以确保在更改页面和页脚相同时，活动按钮保持活动状态。还要确保所有页脚都具有相同的数据id属性

---

旁注：查看jqm1.1即将推出的特性的最新信息——它将包括一个fetchlink实用程序，它允许ajax更新页面的某些部分。因此，您可以使用此功能在每页上抓取并插入页脚。我现在也在尝试使用登录表单，每个页面都需要它。

我仍然不知道为什么，但是jqm会将页脚从一个页面移动到另一个页面，即使我为每个页面分配了一个新的页脚。 也许是因为我给他们都设置了相同的ID

无论如何，我用这个变通方法解决了这个问题： 在“pagebeforeshow”事件中，我将要激活的按钮设置为文档中的所有页脚。我为每个navbar按钮设置了一个特殊的数据名属性，在将其从其余项中删除后，我将其命名为“UIBTN active”类

var $footers = $(document).find('div[data-role="footer"]');
$footers.find('a').removeClass("ui-btn-active");
$footers.find('a[data-name="' + page
        .attr("data-active-footer") + '"]').addClass("ui-btn-active");

你试过“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>
</div>