Assigning a CSS class to a client-side hyperlink in the back-end code

I've been given a task involving a list of links:

<ul>
    <li><a href="#">Aktuel</a></li>
    <li><a href="#">Business</a></li>
    <li><a href="#">Common</a></li>
    <li><a href="#">Extras</a></li>
</ul>

My job is to add a CSS class to one of the links programmatically using C# in the codebehind. The desired outcome should look like this:

....
<li><a href="#" class="active">Business</a></li>
....

Can anyone advise me on which lifecycle event I should use and how to accomplish this?

Please note that I am not allowed to make any changes to the HTML design.

Thank you in advance.

Answer №1

To achieve the desired functionality, you can utilize ClientScript.RegisterStartupScript in the CodeBehind file to execute a jQuery script.

Here is a complete solution that includes the necessary ASP.NET code:

string jsScript = "$(function () { $(\"a:contains('Aktuel')\").addClass(\"active\"); });";

ClientScript.RegisterStartupScript(typeof(Page), "uniqueIdentifier", jsScript, true);

You can see it in action here (excluding the ASP.NET component):

http://jsfiddle.net/JwkAe/

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

Having trouble with the layout on my Django html page, need some help fixing it

I am encountering two challenges while designing the layout for my HTML form page. 1. In screenshot number 1, you can see that I intended to place a button next to the type field, but it appears below instead of side by side no matter what I attempt. 2. ...

Error encountered using Meteor 1.3 autoform/quickform integration

Having recently transitioned to using Meteor 1.3, I've encountered a few challenges related to debugging due to missing imports or exports in tutorials. This particular issue seems to be in the same vein. I wanted to incorporate the autoform package ...

Finding timeslots that are available or free between two specific times in SQL Server can be achieved by querying the

In the structure of my table, I have the following information: CREATE TABLE [dbo].[ReservationDetails] ( [SessionID] [int] IDENTITY(1,1) NOT NULL, [UserID] [bigint] NOT NULL, [ExpectedStart] [datetime] NOT NULL, [ExpectedEnd] [datetime] N ...

Reorganizing DIV elements on-the-fly

I've recently delved into the world of html, css, and javascript with the hopes of creating my very own news website. However, I've come across a puzzling problem: My vision is to have 10 div blocks on the homepage, each containing a headline wi ...

What is the best way to add a value to the value attribute of a div using JavaScript?

Is there a way to insert a value into the value attribute of a div using Internet Explorer 9? I have attempted various JavaScript functions, but so far I can only modify the content inside the div and not the value attribute itself. <div id="mydiv" val ...

Reduce the resolution of a video using the NReco VideoConverter

Trying out the NReco VideoConverter DLL that I found on this site . I'm attempting to shrink a 720p video to 360p and save it in H264 format as an mp4 file. A file is generated, but Windows Media Player is unable to play it. Below is the code I' ...

html issue with the footer

Just starting out with HTML and encountering some difficulties with adding a footer. The main issue is that when I add the footer, the 'form' element gets stretched all the way down until it reaches the footer - you can see an example of this her ...

Tips for maintaining horizontal alignment of menu links

I am frustrated with the vertical alignment of my menus (home, photos, paintings) on my website. I want them to be displayed horizontally instead. Can someone please assist me with this issue? <style> body{background:black} li a{ white-space: ...

New Ways to Style the Final Element in a PHP Array - Part 2

So, here's the current challenge I'm facing along with a detailed explanation of what I'm trying to achieve. Initially, following your suggestions worked smoothly; however, things took a drastic turn when I altered the ORDER BY field and int ...

What is the best method for selectively removing elements within an <a> tag?

Is there a way to selectively remove elements within an <a> tag without removing the entire tag itself (similar to how unwrap() works)? For example, I have the following code: <a href="#page1" class="link" id="page1link" onclick="return false"> ...

I am experiencing an issue with displaying email addresses on my webpage, as the "@" character is not showing up when I input them

My PHP code is injecting Email addresses into an HTML web page. However, when I inspect the element on the page, the Email address appears as Email: [email protected]. Strangely, the actual display on the page shows Bob Bob.com instead of the correc ...

Steps to resolve the 'Unknown keyword' issue while packaging a CSS file using webpack

In the process of upgrading dependencies to the latest versions for my Electron app built in Angular, I have encountered some issues. ✅ Electron remains on v19 ✅ Tailwindcss is updated to v3.1.8 ⬆️ Angular is being upgraded from v11 to v14 ⬆️ ...

Learn how to use Javascript and ASP.NET to refresh the parent page in Mozilla Firefox browser

The code window.opener.location.reload(); works well in Internet Explorer, but it doesn't refresh the parent page in Mozilla Firefox. Can someone please advise me on how to refresh the parent page in a way that is cross-browser compatible? Here is th ...

Encountering an exception in C# while trying to insert data into

I'm encountering a problem with an insert query. I can't figure out what's wrong with it even though the query appears to be correct. Table structure: id(auto increment int) | idkooilist(int)|toegang(varchar) |naam(tinyint) Below is the c ...

Choosing the div elements that have a PNG background image assigned to them

Is there a way to use jQuery to target all the div elements with a background-image property set to url(somepath/somename.png) in their style? ...

Clarification: Javascript to Toggle Visibility of Divs

There was a similar question that partially solved my issue, but I'm wondering if using class or id NAMES instead of ul li - such as .menu, #menu, etc. would work in this scenario. CSS: div { display:none; background:red; width:200px; height:200px; } ...

Setting up bootstrap columns for mobile and medium screens in your web design project is essential for creating

Instructions for medium screen size: |-----(1)||-----(2)| Guidelines for mobile screen (iPhone X): |---------------(2)| |-----(1)| In the first scenario, both (1) and (2) have the same column size in a single line. However, in the second scenario, (1) ...

Switching back to the original CSS file after making changes with jQuery's CSS functions

Within another element's click event, I am using JQuery to toggle the display of a delete icon element from none to block and back again. However, in the CSS file for the corresponding class, I have defined: .pageDeleteIcon { display:none; } .pag ...

Swap image in div upon hovering over a list of links in another div

I'm in the process of designing a webpage that features a header and footer fixed to the top and bottom of the browser window, with adaptable content in between. To structure the inner content, I've opted for a flexbox wrapper containing a list o ...

Using Imported DLL Functions in C# Programming

I am looking to incorporate a DLL into my C# code that contains the following functions: extern "C" { __declspec(dllimport) const char* __stdcall ZAJsonRequestA(const char *szReq); __declspec(dllimport) const wchar_t* __stdcall ZAJsonRequestW(co ...