Question

我有一组锚点，我正在转换为按钮，如下所示：

var sideMenuAnchors = $("#divLeft a");
sideMenuAnchors.width("120px");
sideMenuAnchors.button();

但是当点击其中一个锚点时，我希望ui-state-active保持不变，直到点击另一个按钮...我一直找不到简单的解决方案，是否有一个？

我试过这个：

$('#anchor01').unbind('onmouseover').unbind('onmouseout');

和此：

$('#anchor01').disable()

然而我的要求也没有，因为ui-active-state

上仍然删除mouseout

修改的我实现的解决方案是手动添加jquery-ui所需的按钮类，如下所示：

var sideMenuAnchors = $("#divLeft a");
    sideMenuAnchors.addClass("ui-state-default ui-button ui-button-text-only");
    sideMenuAnchors.width("120px");
    sideMenuAnchors.height("25px");
    sideMenuAnchors.removeClass('ui-corner-all');
    sideMenuAnchors.first().addClass('ui-corner-top');
    sideMenuAnchors.last().addClass('ui-corner-bottom');
    sideMenuAnchors.hover( function() {
        $(this).addClass("ui-state-hover");
        },function() {
        $(this).removeClass("ui-state-hover");
        });

Answer 1

由于您正在将超链接转换为jQuery UI按钮，因此它们之间没有组关系，并且它们都被视为独立。

但是，如果您正在转换单选按钮（具有相同的name属性），那么jQuery UI将维护组关系，您将获得您想要的行为。

所以，你可以这样做：首先，为每个超链接添加一个单选按钮及其相关标签，然后将它们转换为按钮：

<form>
    <div id="divLeft">
        <a id="link1" href="#">Foo</a>
        <a id="link2" href="#">Bar</a>
        <a id="link3" href="#">Quux</a>
    </div>
</form>

$(document).ready(function() {
    $("#divLeft a").each(function() {
        var $this = $(this);
        var text = $this.text();
        var radioId = $this.attr("id") + "_radio";
        $this.text("").append(
            $("<input type='radio' name='buttons'>").attr("id", radioId),
            $("<label>").attr("for", radioId).text(text));
    });

    $("#divLeft a input:radio").width("120px").button();
});

您可以在this fiddle中看到结果。

从jquery ui按钮中删除悬停和默认状态

1 个答案: