2011-06-20 14 views
4

JQuery Mobileのナビゲーションバーでタブをプログラムで選択するにはどうすればよいですか?私はそれを行う以下のコードを試してみました。しかし、役に立たない。JQuery Mobileのナビゲーションバーのタブをプログラムで選択する方法

var tabButton = document.getElementById("tabId2"); 
tabButton.className = "ui-btn-active"; 

UPDATE:

はこれをチェックしてください:http://jsfiddle.net/YnxML/15/

UPDATE:

後は、私はフッターのナビゲーションバーを開発するために使用したコードです。

<div data-role="page" data-theme="b" id="option-page"> 
<div data-role="footer" data-id="foo1" data-position="fixed"> 
    <div data-role="navbar"> 
     <ul> 
      <li><a href="#" id ="tabId1"onclick="method1();" >1</a></li> 

     <li><a href="#" id ="tabId2" onclick="method2();" >2</a></li> 
     <li><a href="#" id ="tabId3" onclick="method3();">3</a></li> 
     </ul> 
    </div><!-- /navbar --> 
</div><!-- /footer --> 

+0

そのコードはChromeのjsfiddleで動作しますが(スタイルは少しずれていますが)、電話で何を見ていますか?タブをまったく変更しないだけですか? – Town

+0

はい町.....タブの選択を変更しません。 – Krishnan

答えて

3

ライブリンク:http://jsfiddle.net/YnxML/24/

HTML

<div data-role="page" data-theme="b" id="option-page"> 
    <div data-role="footer" data-id="foo1" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#" id ="tabId1"onclick="method1();" >1</a></li> 
       <li><a href="#" id ="tabId2" onclick="method2();" >2</a></li> 
       <li><a href="#" id ="tabId3" onclick="method3();">3</a></li> 
      </ul> 
     </div><!-- /navbar --> 
    </div><!-- /footer --> 
</div> 

JS

$('#tabId1').removeClass('ui-btn-hover-b').addClass('ui-btn-up-b'); 
$('#tabId2').addClass('ui-btn-active'); 

$('#option-page').page(); 
+0

フィル。偉大な..おかげさま。あなたはJQMですばらしいです...私が尋ねたすべての質問の解決策を提供しています。:) – Krishnan

+0

できますかaddClass( 'ui-btn-up-b');このクラスで何が起こっているのかを説明してください:$( '#tabId1')removeClass( 'ui-btn-hover-b')。 – Krishnan

+1

不要なクラスを削除し、必要なクラスを追加します。 chromes dev toolsやfirebugの下を見ると、jQMが追加するクラスが表示されます(あなたがマウスを動かしてクリックするなどしても)。目的のクラス(ルック)を見つけるだけです。 removeClass( 'ui-btn-hover-b')< - 不要なクラスaddClass( 'ui-btn-up-b')を削除します。$( '#tabId1' ')< - は、目的のクラスを追加します。私はちょうどコードを保存するためにアクションを連鎖させていますし、IMHOでは読みやすいようになっています。助けて嬉しい;) –

1
$("#tabId").trigger("click"); 

このトリガーはclickイベントを発生させるため、タブから「アクティブ」を追加または削除する必要はありません。