Question

我正在使用jQuery Mobile Navigation Tabs。我为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');

});

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

Answer 1

您好试试这段代码。

$(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");
});

如何在运行时在jquery mobile中的li标签上添加类'ui-btn-active'

1 个答案: