如何讓Jquery-UI按鈕控件組突出顯示所選項目？

Question

我得到一個問題，讓我的按鈕繼續顯示選定的元素。它只在聚焦時突出顯示。如果我將焦點更改爲頁面上的另一個元素，選擇會消失嗎？

HTML：

<div id="button-set" class="controlgroup"> 
     <button class="buttongroup" id="button-1"></button> 
     <button class="buttongroup" id="button-2"></button> 
     <button class="buttongroup" id="button-3"></button> 
    </div> 

的Javascript：

$(".controlgroup").controlgroup(); 
$("#button-1").button({ 
      icons: { 
       primary: "ui-icon-file-image" 
      }, 
      text: false 
     }); 
$("#button-2").button({ 
      icons: { 
       primary: "ui-icon-play" 
      }, 
      text: false 
     }); 
$("#button-3").button({ 
     icons: { 
       primary: "ui-icon-locked" 
      }, 
      text: false 
}); 

編輯1

之前，我張貼了這個問題，我想這撥弄單選按鈕，但無法得到的圖標造型工作：http://jsfiddle.net/darkajax/Gr4h3/ 現在我認識到這是因爲它不適用於jquery-ui ver sions過去1.11.4。 是的！ - 在發佈這個「controlgroup」解決方案之前，我應該嘗試解決這個難題！

Answer 1

類似的問題，類似的答案：how to set jquery button active state

當你將鼠標懸停在一個按鈕，或給予其焦點，類ui-state-active加入。所以如果你想讓這個狀態持續下去，爲了表明一個按鈕被打開，你可以做同樣的事情。

$("#button-2").button({ 
    icons: { 
    primary: "ui-icon-play" 
    }, 
    text: false 
}).click(function(){ 
    if($(this).hasClass("ui-state-active")){ 
    $(this).removeClass("ui-state-active"); 
    } else { 
    $(this).addClass("ui-state-active"); 
    } 
    // Your code here 
}); 

您可以使用ui-state-active或ui-state-focus。你的選擇。