jqueryボタンのアクティブ状態を設定する方法

Question

jqueryボタンを使用するこの正しいナビゲーションがあります。ユーザーがクリックすると、ページが読み込まれます。私が必要とするのは、一旦ページがリロードされると、ボタンはそれが選択されたことを示すはずです。

jqueryボタンを使用してこれを行うにはどうすればよいですか？

Answer 1

ページが読み込まれると、ボタンにCSSクラスが追加されます。このクラスには、選択されていることを示すスタイルがあります。

Answer 2

ボタンが新しいページに行く場合は、クラスを切り替えるために、サーバー側の言語またはhtml（設定に応じて）を使用する必要があります。

.active { font-weight:bold; } 

$('#button').addClass('active'); 

Answer 3

は、なぜあなたはjQueryのUIタブウィジェットを使用していない：あなたのボタンは新しいコンテンツで現在のページを更新した場合

、次のようなものを使用することができますか？ ボタンセットウィジェットを試すこともできますか？

これらが最適でない場合は、CSSを使用して効果的に使用できます。次のコードでは、クリックしたときにアクティブ状態を維持し、アクティブ状態を他から削除し、クリックされたdivを更新する2つのjQuery UIボタンを設定します。

HTML

<button id="btn" class='nav'>Button 1</button> 
<button id="btn2" class='nav'>Button 2</button> 
<div id="data">Init....</div> 

はJavaScript

$(function() { 

    //Variable of previously selected 
    var selected = []; 

    //Setup Buttons 
    $('.nav').button().click(function() { 
     //Enable previous 
     if(selected[0]) { 
      selected.button('enable').removeClass('ui-state-active ui-state-hover'); 
     }  

     //Cache the previous 
     selected = $(this); 

     //Disable this and keep color attributes 
     selected.button('disable').addClass('ui-state-active').removeClass('ui-state-disabled'); 

     //Do Normal Button Click Stuff Here 
     $('#data').text(selected.text() + ' was clicked'); 
    }); 
    $('#btn').click(); 
}); 

これは焦点を当てた状態でそれを保つ

Answer 4

$('#mybutton').button().bind('click', function(){ 
    $(this).addClass('ui-state-focus'); 
}); 

（すなわち、選択したjqueryのUIのテーマごとに強調されています）。もちろん、ツールバーの他のすべてのボタンからこのクラスを削除する必要があります。