What is the best way to modify the class of my <li> element with JavaScript?

My asp.net project utilizes a master page that includes a list within it.

<ul id="navigation">
         <li id="li1" runat="server" class="selected"><a href="Events.aspx">Events</a></li>
         <li id="li2" runat="server"><a href="AddEvent.aspx">Add Event</a></li>
         <li id="li3" runat="server"><a href="MyProfile.aspx">Profile</a></li>
         <li id="li4" runat="server"><a href="Friends.aspx">Friends</a></li>
         <li id="li5" runat="server"><a href="FindFriends.aspx">Find Friends</a></li>
         <li id="li6" runat="server"><a href="Schedual.aspx">Schedule</a></li>
         <li>
             <asp:LinkButton ID="LogOutButton" runat="server" OnClick="LogOutButton_Click">Log Out</asp:LinkButton>
         </li>
</ul>

The selected css class includes an image indicating the current page. How can I dynamically change this class using javascript or C# when navigating?

I lack expertise in javascript, so any guidance would be greatly appreciated.

c#javascript

Answer №1

document.getElementById("li6").classList.add("whatever");

It should function properly.

Answer №2

$("#li1").toggleClass("active");

Should do the trick.

Demo

Answer №3

Implementing this functionality in JavaScript/jQuery is straightforward.

If this navigation feature requires dynamic updating when a new page is displayed, it would be more efficient to handle this on the server side within the markup.

You have not provided much information about the server-side technology you are using to serve this page. However, both ASP.NET WebForms and MVC offer flexibility in manipulating the HTML output in various ways.

Answer №4

If you want to apply the same class to all of your li tags, you can do so by following this example:

<li class="li">
 ... insert content here
</li>

Then, in your JavaScript code, you can easily add another class to all elements that have the "li" class like this:

$(".li").addClass("newClassToAdd");

Finally, in your CSS file, define the styles for the "li" class like this:

.li
{
  ... specify the necessary CSS properties here
}

Answer №5

Check out this helpful post on finding elements by their class name

Selecting a div by classname

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

jQuery AJAX fails to capture C# exception handling properly

I am encountering an issue with how jQuery Ajax handles errors in the production environment compared to my local development setup. When I make a jQuery Ajax call to a web service [WebMethod] that throws a specific error in my local environment, jQuery c ...

c#jqueryajaxexception

Navigating through nested nodes within an Angular directive can be achieved by

Here is some HTML code with a directive: <foo> <span>Bar</span> </foo> myapp.directive('foo', function () { return { restrict: 'E', replace: true, transclude: true, temp ...

javascriptangularjsangular-directive

Clicking on a row in the Gridview should trigger the expansion or collapse of the Nested

My current issue involves a nested GridView setup like this: <asp:GridView ID="gvParent" runat="server" DataKeyNames="id"> <Columns> <asp:TemplateField> <ItemTemplate> <asp:GridView ID="gv ...

javascriptc#jqueryasp.netgridview

Experience the power of Stimulsoft reporting integrated with Angular and Asp.net Core-framework!

I've created a Webservice in Asp.net Core to generate reports which is then called in an Angular app to display the reports. However, when I try to show the report in Angular, it only shows a blank page. What could be causing this issue and how can I ...

c#angularasp.net-corestimulsoft

Using a nested loop in Javascript to fetch JSON data

My goal is to display Categories and their corresponding subcategories in a specific order. However, my current method of using loops within loops is not producing the desired outcome: Category(Mobile) Category(Laptop) Subcategory(Iphone4) Subcategory(Iph ...

javascripthtmljsonloops

Seeking guidance on developing a client authentication webservice - any suggestions?

As I work on developing an android application to complement my existing desktop software, I am considering implementing an authentication process for users of the mobile app. I envision a central web service that will handle both user verification and sto ...

c#asp.netasp.net-mvcwcfweb-services

Press the button to dynamically update the CSS using PHP and AJAX

I have been facing challenges with Ajax, so I decided to switch to using plain JavaScript instead. My goal is to create a button on a banner that will allow me to toggle between two pre-existing CSS files to change the style of the page. I already have a f ...

javascriptajaxwordpresspost

Acquire the text within an anchor tag using JavaScript

Is it possible to invoke a search for all links on my Wordpress blog? I'm not sure if my idea is correct. Currently, I am using an Ajax call for another search on this site. How can I extract the text from a hyperlink HTML tag? For example: <a href ...

phpjavascripthtmlwordpress

Using Google App Engine with Stripe - Enable users to easily upload images for account identity verification directly through their browser using Javascript

After extensive research, I have been exploring how to enable direct browser uploads, particularly in the context of utilizing Stripe with Google App Engine, as discussed on this forum. The Stripe documentation also mentions the possibility of browser uplo ...

javascriptajaxgoogle-app-enginestripe-payments

Unusual sequence of JQuery Ajax calls

Within my website, there is a project div that is displayed using EJS. The data for the projects in EJS are rendered using a forEach loop, resulting in multiple similar divs appearing on the page. Each project div is assigned an id for identification pur ...

javascripthtmljquerydom

Node responds with a 404 error upon receiving the post request

I am facing an issue with my jQuery code. Here is what I have: $.ajax( { type: 'POST', data : mydata, url : '/routerfunction', dataType : 'String', success : function(data) ...

javascriptjquerynode.jsexpress

What is the best way to integrate a GraphQL API with ASP.NET Framework 4.6?

I am using an ASP .NET Framework 4.6 app. My goal is to efficiently consume a graphql API by incorporating a library or another suitable method. If needed, I am open to considering alternatives such as making a POST request. (Any references or examples ...

c#.netgraphql

Creating dynamic routes for custom locales in Next.js

I'm currently working on a Next.js application with internationalization functionality using next-i18next. Most of my site's pages have been generated in both English and French, except for dynamic routes (like blog/[id]/[blog-title]). For these ...

javascriptnext.jsinternationalization

The onchange event does not seem to be functioning as expected in a dropdown menu that was dynamically added from a separate

Is there a way to display a list of tables from a database in a dropdown menu and allow users to select a table name? When a user selects a table name, I would like to show all the data associated with that table. The HTML file structure is as follows: & ...

phpjavascriptjquerymysqlajax

Waiting specifically for an element to appear using Selenium Webdriver

Currently, I am utilizing the Selenium WebDriver with C# and implementing the page object module. At this point, I require a syntax for an explicit wait where I already have the webelement available. [FindsBy(How = How.Id, Using = "Passwd")] public IWebEl ...

c#selenium

Configure gulp tasks based on the environment variable NODE_ENV

Is it possible to set up a specific gulp task based on the value of NODE_ENV? For instance, in my package.json file, I currently have: "scripts": { "start": "gulp" } Additionally, I have various gulp tasks defined such as: gulp.task('developm ...

javascriptnode.jsgulp

Animation using jQuery is functional on most browsers, however, it seems to

After creating an animation to simulate an opening door using jQuery, I discovered that it works perfectly on Firefox 24, Chrome 28, and IE 8. However, Safari presents a problem - the door opens but then the "closed" door reappears at the end of the animat ...

javascriptjqueryhtmlcsssafari

Encountering an issue with resolving 'create-react-class'

I have some files with hobbies listed in Data.js. I am attempting to add these hobbies and display them in a list format within my App.js file. However, I keep encountering an error stating that the create-react-class module cannot be found. Does anyone k ...

javascriptjsonnode.js

Touchwipe incorporation - single-page website script

Today has been dedicated to troubleshooting and searching for a solution regarding the integration of TouchWipe () on a custom one-page-site script based on Parallax that I found perfect for my latest project (). The script itself performs beautifully wit ...

javascriptjqueryiphoneipadparallax.js

Adding auth0 authentication to a Next.js 13 application: A step-by-step guide

Currently, I am using a nextjs 12 application and set up auth0 as my authentication provider by following the guidelines provided here: https://auth0.com/docs/quickstart/webapp/nextjs/interactive. However, I am now looking to upgrade my application to next ...

javascriptnext.jsupgradeauth0next.js13