0

我正在使用 jQuery Mobile 导航选项卡。我为所有页面（如footer.html）采用一个通用页脚，并在运行时将此页脚加载到页脚div 上。这正如我所愿。

这是我的footer.html代码

<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
        <ul id="footertab">

            <li id="home"><a href="#page1" data-transition="none"   data-icon="tab-home"  ></span>Home</a></li>
            <li><a href="#page2" data-transition="none"  data-icon="tab-alert"   ><span   class="count">6</span>Alerts</a></li>
            <li><a href="#page3" data-transition="none" data-icon="tab-services" >Services</a></li>
            <li><a href="#page4" data-transition="none"  data-icon="tab-learn">Learn</a></li>
            <li><a href="#page5" data-transition="none" data-icon="tab-setting">Settings</a></li>  
        </ul>


    </div><!-- /navbar -->
</div><!-- /footer -->

</div><!-- /page -->

我使用此代码在运行时添加此页脚。

$(document).on('pageinit', function(event){
  $(".addfooter").load('footer.html', function(){
  $(this).trigger("create");

  });

});

这运行良好。但我对此代码有一些问题。它不显示活动选项卡。我知道我必须在我选择的选项卡中添加 class='ui-btn-active ui-state-persist'。但我不确定如何用 java 脚本添加和替换它。我不想用在所有页面上写这个页脚。

对于此任务，我在脚本中使用此代码

$(document).delegate('[data-role="navbar"] a', 'click', function () {
    alert("calling tab click");
    $(this).addClass('ui-btn-active ui-state-persist');

});

每次单击任何选项卡时都会调用此函数。但它确实显示了选定的选项卡。所有选项卡都被取消选择。我怎么解决这个问题。请建议我

4

1 回答 1

0

你好试试这个代码。

$(document).live('pageshow',function(event,ui){
  // disable previous selected links
  $('[data-role=navbar] a').removeClass("ui-btn-active");
  // select link
  var menuLink = $('[data-role=navbar] a[href="#'+$.mobile.activePage.attr('id')+'"]');
  menuLink.addClass("ui-btn-active");
});
于 2013-10-16T04:07:42.017 回答