使 JQuery 按钮显示为按下；即改变主题答案

【问题标题】：Make JQuery button appear pressed; ie change theme使 JQuery 按钮显示为按下；即改变主题
【发布时间】：2014-08-20 08:23:32
【问题描述】：

我正在使用 JQuery UI 按钮并使用 ThemeRoller 来完成所有花哨的颜色操作。我目前正在寻找一种方法来呈现一个除了被按下之外什么都不做的按钮。

我假设有一个样式属性可以用来将颜色从默认状态更改为按下状态，但我真的很难找到它。我还搜索了一种将按钮设置为“选定”状态的方法，但运气不佳。两种方法都同样有效。

谢谢！

【问题讨论】：

你应该看看这个api.jquery.com/toggleclass
$("#buttonName").toggleClass("ui-state-active");给出所需的颜色。但是，单击该按钮将恢复为默认颜色。有没有办法防止这种情况发生？
按钮没有select 事件。但是，有click、mouseover、focus 等。

标签： javascript jquery css jquery-ui

【解决方案1】：

尝试添加活动类。

$("#buttonName").addClass("ui-state-active");

【讨论】：

这给出了相同的行为 $("#buttonName").toggleClass("ui-state-active");单击仍将恢复为默认值。

【解决方案2】：

感谢一些 cmets，我发现了一种可以产生所需行为的方法。不过，这似乎远非最佳方法。

$("#button-id").button().addClass("ui-state-active");
$(document).mousemove(
        function(event){
            $("#button-id").button().addClass("ui-state-active");
        });

我想不断重置课程并不是最糟糕的。

请注意，我尝试绑定到按钮的任何事件都会导致恢复为原始颜色。

【讨论】：

【解决方案3】：

看起来您需要禁用按钮，并将 css 样式设置为活动，所以：

$('#buttonName').attr('disabled','disabled').addClass("ui-state-active");

应该做的伎俩

编辑

由于您不想禁用该字段：

$('#buttonName').addClass("ui-state-active").click(function(e) {
  e.preventDefault();
  return false;
});

【讨论】：

这很好用，如果必须的话，我不介意去那里。但是，禁用按钮的外观比活动按钮的外观更受欢迎。
我试过你的编辑。鼠标悬停或单击后，颜色仍会恢复。我只能假设颜色不是事件的结果，或者 .preventDefault() 在这种情况下会起作用。