Adding a CSS class to a LinkButton upon clicking in an ASP.NET application

Let's say I have 3 link buttons on a webpage,

<asp:LinkButton ID="LB1" runat="server" CssClass="regular" OnClick="LB1_Click">
  Today
</asp:LinkButton>
<asp:LinkButton ID="LB2" runat="server" CssClass="regular" OnClick="LB2_Click">
  Today
</asp:LinkButton>
<asp:LinkButton ID="LB3" runat="server" CssClass="regular" OnClick="LB3_Click">
  Today
</asp:LinkButton>

I am looking to implement a functionality where when a link button is clicked, it gets highlighted with CSS and then the highlighting is removed when another link button is clicked. In other words, I want to display the active link button. Any suggestions?

cssasp.net

Answer №1

Utilizing jquery-ui, I apply the class abtn to each button (input type=submit or a href).

Upon page load, the following function is executed:

function dobuttons() {
        $(".abtn").hover(
            function () {
                $(this).addClass("ui-state-hover");
            },
            function () {
                $(this).removeClass("ui-state-hover");
            }).bind({
                'mousedown mouseup': function () {
                    $(this).toggleClass('ui-state-active');
                }
            }).addClass("ui-state-default").addClass("ui-corner-all")
            .bind('mouseleave', function(){$(this).removeClass('ui-state-active')});
    }

For a live example, visit

Answer №2

During the Page_Load event, you assign the default class to all linkbuttons on the page.

LB1.CssClass = "StandardClass";
LB2.CssClass = "StandardClass";

....

Then, in the Btn_Click event for each LinkButton, you change its class to "Active".

For example, if LB1 is clicked, the following code would execute within LB1_Click:

LB1.CssClass = "ActiveClass";

It appears to be a simple and clear process. I hope I am not misunderstanding your question.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Position Bootstrap post pagination links at the end of the row in WordPress

My Wordpress custom post type has numeric pagination links within a Bootstrap row instead of appearing below the post thumbnails. How can I move them to a new row below the thumbnails without creating a row within a row? Bootstrap version: 3.3.7 https:// ...

htmlwordpresstwitter-bootstrapcss

Creating a replicated Dropdown menu with Jquery and inserting it into a changing Div

I currently have a dropdown list on my page with the ID of "mainDDL" and some pre-existing data. Now, I am looking to duplicate this dropdown list and add it to another specific div element. To accomplish this, I used the following code snippet: var dd ...

javascriptjqueryhtmlasp.net

Tips for adjusting the size of an image in both the vertical and horizontal axes using CSS

As a beginner in HTML, I am currently facing an issue while trying to display a set of pictures. My goal is to resize the pictures based on the current window size while maintaining the aspect ratio. Despite experimenting with various methods like using wi ...

htmlcss

What is the best way to implement a SELECT statement in my application that will display multiple values for a certain field, establishing a many-to-many relationship?

It's a bit complicated, but I'll illustrate with an example. Users Table UsedId UserName -------- ---------- 1 Mike 2 Raul HasPrivileges Table UsedId PrivilegeId -------- -------------- 1 1 1 ...

c#asp.netsqlado.net

The functionality of sending emails via Hotmail SMTP C# is successful when tested locally, but encounters issues when deployed on a live server

I have encountered an issue with my asp.net web API that is designed to send emails to a Gmail account. The API works perfectly when both the backend and frontend projects are running locally, but it fails when deployed on live hosting (SmarterAsp). Here& ...

c#asp.netemailsmtphotmail

Struggling to customize a CSS navigation menu?

In search of a skilled CSS professional to examine the CSS and HTML code for my website menu. To view the menu in action, visit The main issue is that the sub menus are not displaying on the top level page, but they appear when navigating to specific page ...

htmlcssmenu

The anchor tag <a> is configured for inline display but is unexpectedly occupying the entire space

I am currently incorporating Bootstrap into my HTML, however, the <a> tag is behaving like a block display despite the fact that I have specified the CSS to be display:inline; <!doctype html> <html> <head> <link rel="styleshee ...

htmlcsstwitter-bootstrap

Personalized design created using v-for

I have an array being passed through v-for and I want to use the values within the "style" attribute. Essentially, I need to append the value from v-for to style:"left"+EachValue+"px", but I'm having trouble with the syntax. I'm unsure if this ap ...

javascripthtmlcssvue.js

Issue with horizontal scrolling functionality in DataTables

I have a table with over 10 columns, and I am using datatables to display the data. I have enabled horizontal scrolling due to the large number of columns, but the scroll is not appearing. Can someone please assist me with this issue? Here is a screenshot ...

jquerycssdatatables

tips for expanding the size of your images

Hey there, I'm looking for some help with the code below. I need to increase the width of the images and remove the border of the slider div which is currently showing a white border that I want to get rid of. I am using JavaScript to display the imag ...

jqueryhtmlcss

Image container unable to resize to fit within a CSS grid cell

I'm currently working on organizing a CSS grid for my images on a tribute page project from free code camp. I was able to set up the grid as intended, but I am facing some difficulties in making the images fit perfectly within each cell. Some images a ...

htmlcssgrid-layoutcss-grid

Is it possible to resize an inline SVG element without modifying the <svg> tag?

Utilizing a Ruby gem known as rqrcode, I am able to create a QR code in SVG format and send it as an API response. Within my frontend (Vue.js), I am faced with the task of displaying the SVG at a specific size. Currently, my code appears as follows, rende ...

cssvue.jssvg

Generating alternate list items

I'm attempting to design a list style that resembles the one depicted in the image linked below: https://i.stack.imgur.com/U7vMw.jpg My issue is that when I try to add borders, they end up applying to the entire structure. .styled-list { list-st ...

htmlcsslist

Working with loops and databases in ASP.NET using VB without referencing the Datatable object

I've encountered a problem with my code that involves looping through a data table and inserting the data into a database. The issue is that the data is inserted correctly during the first loop, but then duplicates itself for the remaining loops. As a ...

asp.net

How do I position an input box at the bottom of a split window using CSS?

I am grappling with maintaining the alignment of an input box underneath a chat window while using the float:left property. As there will be multiple chat windows and I want them to remain next to each other, I am uncertain about how to achieve this. Chec ...

css

When attempting to display or hide elements within a function, the foreach loop only chooses the last variable when referencing the `div`

As I navigate through a straightforward foreach loop to retrieve "blog posts", the page displays basic information about each post along with a 'reply' and 'delete' button. Clicking on the 'reply' button reveals a small form b ...

javascriptphphtmlcsssql

Variations in CSS behavior for select and option elements

I have implemented the following HTML code snippet: <select ...> <option value=""></option> <option data-ng-repeat="type in xy" value="{{type.name}}" ng-style="{'border-left': '4px solid '+ type.color, &apos ...

htmlcssangularjs

Guide to creating a tab dropdown in Bootstrap version 2

Can someone guide me on how to make my Bootstrap tab dropdown? Here is the code snippet I am currently using in MVC. HTML <div id="tabs" style="border: 0px; width:100%;"> <ul id="uTabs"> <li><a href="#tabs-1">< ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-2

In bootstrap 3.0, columns are arranged in a vertical stack only

As a newcomer to web design, I've been struggling to figure out why my basic grid in Bootstrap 3 isn't working as expected. No matter what I try, my columns stack vertically instead of side by side and always resize to fill the browser window. Th ...

csstwitter-bootstrap

Using ASP.NET to validate a radiobutton list using JavaScript, followed by invoking a C# function

After experiencing some errors, I have refined my question to better articulate my objective. By revising the logic of my previous issue - where no text appeared in a pop-up dialog triggered by a C# script utilizing a JavaScript method - I present my updat ...

c#javascriptasp.net