0

jQuery モバイル ナビゲーション タブを使用しています。私は 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 に答える