如何使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版本过去1.11.4。 是的！ -在发布此“控制组”解决方案之前，我应该尝试解决该难题！

Answer 1

类似的问题和类似的答案： 如何设置jquery按钮的活动状态

当您将鼠标悬停在按钮上或使其具有焦点时，将添加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 。 你的选择。