如何使Jquery按钮控件组突出显示选定的项？

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/现在我意识到，这是因为它在1.11.4之后不适用于jquery版本。是的！-在发布这个“控制组”解决方案之前，我应该试着解决这个难题！

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。你自己选吧。