ASP.NET Change link button color when clicked without post-back or update panel

问题

in an asp.net page I have a list of Link buttons:

<asp:LinkButton ID="LinkButton1" runat="server" OnClick="Link_Click">Link 1</asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server" OnClick="Link_Click">Link 2</asp:LinkButton>
<asp:LinkButton ID="LinkButton5" runat="server" OnClick="Link_Click">Link 3</asp:LinkButton>

I am using them as triggers for an update panel on the site. When a user clicks on a link a control gets loaded on the page.

What I want is this:

Whne the user clicks on a link the color of that link change so we can know which link was pressed last.

I would like to do this without post-back or update panels. So is there a way to do this via javascript? or other solutions?

Thank you for any help

回答1:

JAVASCRIPT:

<script>
    function changeColor(e) {
        e.style.color = "red";
        return false;
    }
</script>

HTML:

<asp:LinkButton ID="LinkButton1" OnClientClick="return changeColor(this);" runat="server">LinkButton</asp:LinkButton>

Good luck!

回答2:

Sure, there's a way with JavaScript. You could hook up an event to the OnClientClick attribute of your LinkButtons and run some client-side code.

You might want to create some CSS for the two states of that button. It would be easier to assign new classes to the buttons than to change all of their styling with JavaScript.

If you were willing to use a library like jQuery, it would be really easy:

Assign a matching CSS class "A" to each button.

<asp:LinkButton ID="Button1" CssClass="button button-off" runat="server" />
<asp:LinkButton ID="Button2" CssClass="button button-off" runat="server" />

Create a "B" CSS class that is the "off" state and "C" class that is the "On" state.

Assign a click handler to each button that has the "A" class. Something like this (untested):

$('.button').click(function() {
    $('.button').removeClass('button-on');
    $(this).addClass('button-on');
});

The click handler above should behave so that it clears the "B" class from all of the buttons with class "A" and assigns the "C" class to the button that was clicked.

来源：https://stackoverflow.com/questions/8272729/asp-net-change-link-button-color-when-clicked-without-post-back-or-update-panel

标签

javascript

ASP.NET

linkbutton