1. Through code behind( C# )
<style type="text/css">
.button_color
{
background-color:Green;
}
</style>
<div class="">
<asp:Button ID="Button2" runat="server" class="button_color" Text="Button"
onclick="Button2_Click" />
<asp:Button ID="Button3" runat="server" class="button_color" Text="Button"
onclick="Button3_Click" />
<asp:Button ID="Button4" runat="server" class="button_color" Text="Button"
onclick="Button4_Click" />
<asp:Button ID="Button5" runat="server" class="button_color" Text="Button"
onclick="Button5_Click" />
</div>
code behind ( c# )
protected void Button2_Click(object sender, EventArgs e)
{
Button2.Style.Add("background-color", "red");
Button3.Style.Add("background-color", "Green");
Button4.Style.Add("background-color", "Green");
Button5.Style.Add("background-color", "Green");
}
protected void Button3_Click(object sender, EventArgs e)
{
Button3.Style.Add("background-color", "red");
Button2.Style.Add("background-color", "Green");
Button4.Style.Add("background-color", "Green");
Button5.Style.Add("background-color", "Green");
}
protected void Button4_Click(object sender, EventArgs e)
{
Button4.Style.Add("background-color", "red");
Button2.Style.Add("background-color", "Green");
Button3.Style.Add("background-color", "Green");
Button5.Style.Add("background-color", "Green");
}
protected void Button5_Click(object sender, EventArgs e)
{
Button5.Style.Add("background-color", "red");
Button2.Style.Add("background-color", "Green");
Button3.Style.Add("background-color", "Green");
Button4.Style.Add("background-color", "Green");
}
2. Clent side(using Jquery )
<script type="text/javascript">
$(document).ready(function()
{
$(".button_color").css("background-color","green");
$(".button_color").click(function(e)
{
$(".button_color").css("background-color","green");
$(this).css("background-color","red");
e.preventDefault();
});
});
</script>
<div class="">
<asp:Button ID="Button2" runat="server" class="button_color" Text="Button"
onclick="Button2_Click" />
<asp:Button ID="Button3" runat="server" class="button_color" Text="Button"
onclick="Button3_Click" />
<asp:Button ID="Button4" runat="server" class="button_color" Text="Button"
onclick="Button4_Click" />
<asp:Button ID="Button5" runat="server" class="button_color" Text="Button"
onclick="Button5_Click" />
</div>
In the 2nd method
e.preventDefault(); used to avoid
postback...