Add and remove the active class from a navigation link

In this article, we will understand how to add and remove the active class from a navigation link with the help of jQuery and JavaScript.

What is jQuery?

JQuery is a fast, lightweight, small, and feature-rich JavaScript library. For adding jQuery in the HTML page we can use the <script> tag.

Below methods are used to add and remove the active class from a navigation link.

addClass() Method

This method adds one or more class names to the selected elements. If we want to add more than one class, separate the class names with spaces.

Syntax:

Following is the syntax of addClass() method:

In above syntax, classname is required and function(index,currentclass) is optional.

removeClass() Method

This method removes one or more class names from the selected elements. If no parameter is specified in the removeClass() method, it will remove all class names from the selected elements.

Syntax:

Following is the syntax of removeClass() method:

In above syntax, classname is optional and function(index,currentclass) is optional.

Let's take various examples of how to add and remove active classes from a selected navigation link.

Example 1:

Explanation:

In the above example, we have added and removed the active class from the selected navigation link. When we click on the particular navigation link, the active class is added to the selected menu.

Output:

Below is the output of this example.

Example 2:

Explanation:

In the above example, we have added and removed the active class from the selected navigation link. When we click on the particular navigation link, the active class is added to the selected menu.

Output:

Below is the output of this example:

Example 3:

Explanation:

In the above example, we have added and removed the active class from the selected navigation link. When we click on the particular navigation link, the active class is added to the selected menu.

Output:

Below is the output of this example: