There is a single aspx page with a set of link buttons on it.
Link Button 1
Link Button 2
Link Button 3
Link Button 4
Link Button 5
When any of the link buttons are clicked, they should be highlighted.
All these link buttons are contained within a table.
Thank you for any assistance provided.
To customize the styling of link buttons by adding a CssClass, you can include the following code:
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="linkbtn" />You can then specify the highlighted style in CSS like this:
.linkbtn .highlighted { color: red; }
Furthermore, utilize JavaScript to toggle classes. Here is an example using jQuery:
$(".linkbtn").click(function () {
$(".linkbtn").removeClass("highlighted");
$(this).addClass("highlighted");
});
In ASP.Net, simply do the following:
<asp:LinkButton id="LinkButton4" OnClick="LinkButton4_Click" runat="server"/>
And in the codebehind section:
private void SetHighlighted(LinkButton btn)
{
LinkButton1.CssClass = "";
LinkButton2.CssClass = "";
LinkButton3.CssClass = "";
LinkButton4.CssClass = "";
LinkButton5.CssClass = "";
btn.CssClass = "highlighted";
}
protected void LinkButton4_Click(object sender, EventArgs e)
{
SetHighlighted((LinkButton)sender);
}
Repeat the above steps for every link button on your page.
To easily customize the appearance of linkbuttons, you can utilize CSS.
When handling the click event of a linkbutton, simply set its CSSClass property to a unique class that distinguishes it from other linkbuttons in the list.
For example, upon page load, assign all linkbuttons a CSSClass property of "Link" with styles such as 8pt font size, Tahoma font family, and underlined text. Create another class named "LinkSelected" with the same styles but bolded.
In your linkbutton click handler, use myLink.CSSClass="LinkSelected"; or
((LinkButton)sender).CSSClass="LinkSelected";You can define the Link and LinkSelected classes either inline (not recommended) or in a separate .css file.
Give this method a try and feel free to reach out if you need further clarification.
Lately, I have been incorporating the same elements into my web pages quite frequently.
Upon reviewing your code, I notice that you have 2 options that I am not familiar with:
1) If your link buttons are linked to a specific page (like hyperlinks), you can determine which site is being clicked by hovering over it.
2) If your link button only triggers code, you can simply make it stand out visually by using something like "linkbutton1.Font.Bold = true."
As far as I know, achieving this through CSS may not be possible because these elements are not rendered as anchor tags.
Here is an example snippet <html> <head> <style> .test > input { //this selector is incorrect. color:red; } </style> </head> <body> <div class="test"> <di ...
I'm looking for a way to pass the variable Date to my function HasBtnRights(). Does anyone have suggestions on how I can achieve this? <asp:TemplateField HeaderText="More info" Visible='<%#HasBtnRights(Eval("Date")) %>'> < ...
I am working with a color array that looks like this: $colors: ( 'primary': '#aaa', 'secondary': '#bbb', 'color-3': '#ccc', 'color-4': '#ddd', 'color-5': & ...
I have structured my webpage with three different divs. The left one is defined with col-md-2, the middle one with col-md-8, and the remaining right div with col-md-2. I want the right div to take up 100% of the screen height, even when no controls are pre ...
I am in need of an uncomplicated way to visually represent events taking place around the globe. This involves creating a 2D image of a world map, along with a method to show visual alerts when events occur at specific geographical coordinates [lat, lng]. ...
I have a unique setup with multiple boxes arranged using Flexbox as the container and list tags as individual boxes inside. These boxes are responsive and change position as the width is resized. My goal is to use jQuery to detect which boxes are touching ...
Having recently started using bootstrap (less than six hours of documentation/development time), I encountered an issue where the width of my shadow container extends too far on smaller screen sizes. Any screen size above 991px leaves unwanted white space ...
I am currently working with CSS and HTML, trying to replicate the design shown in this image: https://i.stack.imgur.com/Uyczp.png Initially, I attempted to achieve this by using multiple h1 tags, but after researching further, I realized that it is gener ...
In my MVC 3 project, I have generated a csv file in an Action Method on the server named GetCSV() which is designated as an [HttpPost] action method. My goal is to send this csv file directly to the web browser for download. While I was able to achieve t ...
When viewing this page in a narrow browser window, an issue arises with how the photo captions are displayed at the bottom of the page. It's evident that the caption extends past the right edge of the photo. My preference would be for the photo and c ...
Utilizing a CSS class to truncate text in the accordion header, which includes both a URL and plain text fields that need to be displayed on the same line. Desired Output: .../abc/xyz Count:42 Current output: .../abc/xyz Count:42/ (An odd slash is ...
I have been struggling to understand how I can capture events from a listbox. In the template, I added the parameter IsChecked="" to initiate my method. However, the issue lies in trying to capture what has been checked in the method. SelectedItem only s ...
How can I simulate the Enter key press event on a web page using the GeckoFX Web Control? I am unable to use SendKeys.Send({ENTER}) Is there a method to trigger the Enter key using JavaScript within a webpage? ...
When I make this ajax request: $.ajax({ type: "POST", url: "/admin/RoutingIndicators/Add", data: { newSecondaryRI: newRi }, success: function () { alert('hit'); document.location.reload(true); }, error: fu ...
My webpage has a simple initialization process where it binds data to a GridView. This GridView has sorting and paging functionalities enabled, and is contained within an UpdatePanel. However, I am encountering an error when the user performs the followin ...
Currently, I am attempting to implement dropdown menus in Bootstrap 5. According to my research, this feature requires Popper.js integration, but I am uncertain of the correct way to include it in my Laravel project that utilizes Laravel Mix. I have made ...
Currently, I am working on a project involving html and javascript. My issue lies in displaying multiple options on the same webpage without switching pages. Essentially, I have a plot and a few buttons on one page, and when a user clicks on any of these b ...
Within a specific folder structure, I have a collection of images designated for both desktop and mobile displays: img: img-1.png img-2.png img-3.png img-4.png img-5.png img-6.png img/mobile: img-1.png img-2.png ...
https://i.stack.imgur.com/VATrD.png I'm looking to replicate this design using a pre-built Chip component from MaterialUI While the solution might involve Some Text using html and css, it still may not achieve an identical result. I've come acr ...
I've encountered an issue with my preloader where it's loading in front of the <body> element but not in front of the site's <navbar> or the {% block content %}. The CSS snippet to increase the z-index of the preloader is as foll ...