Remove hover and default state from jquery ui button

I have a set of anchors that I am conve开发者_JAVA技巧rting to buttons like so:

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

However when one of these anchors is clicked I want the ui-state-active to remain until another button is clicked ... I have been unable to find a simple solution, is there one ?

I have tried this:

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

and this :

$('#anchor01').disable()

However neither do what I require, as the ui-active-state is still removed on mouseout

Edit The solution I implemented was to manually add the button classes that I required from jquery-ui, like so:

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");
        });

Since you're transforming hyperlinks into jQuery UI buttons, there are no group relationship between them and they're all considered as independent.

However, if you were transforming radio buttons (with the same name attribute), then jQuery UI would maintain the group relationship and you would obtain the behavior you're aiming for.

So, you can do just that: first, add a radio button and its associated label to each hyperlink, then transform these into buttons:

<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();
});

You can see the results in this fiddle.