如何設置jquery按鈕活動狀態

Question

我有這個正確的導航，使用jQuery按鈕。如果用戶點擊它，頁面將加載。我需要的是一旦頁面重新加載，按鈕應該顯示它被選中。

我該如何使用jquery按鈕來做到這一點？

Answer 1

一旦頁面加載一個css類到按鈕。對這個類有一些樣式，這將表明它被選中。

Answer 2

如果您的按鈕轉到新頁面，您將需要使用服務器端語言或html（取決於您的設置）來切換類。

如果您的按鈕刷新新內容的當前頁面，則可以使用類似以下內容：

.active { font-weight:bold; } 

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

Answer 3

你爲什麼不使用jQuery UI的標籤窗口小部件？ 你也可以嘗試使用buttonset小部件？

如果這些對你不是最佳的，那麼你可以使用一些CSS的東西，以利於您。以下代碼設置了兩個jQuery UI按鈕，它們在單擊時保持其活動狀態，從另一箇中移除活動狀態，並更新已單擊的div。

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的主題，你選擇）。當然，您需要從工具欄上的所有其他按鈕中刪除此類。