How to apply an active class using Javascript and jQuery

Question

How to apply an active class using Javascript and jQuery

I've been trying to figure out how to apply the active class to my unordered list using jQuery. Despite attempting various solutions found on Stackoverflow, nothing seems to be working. My goal is to have the text color change to red when the active class is added. Can anyone shed some light on why this code isn't functioning as expected?

$("li").click(function() {
  $("li").removeClass("active");
  $(this).addClass("active");
});

.active { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="navbar">
  <li class="active"><a href="#">link</a></li>
  <li class=""><a href="#">link</a></li>
  <li class=""><a href="#">link</a></li>
  <li class=""><a href="#">link</a></li>
  <li class=""><a href="#">link</a></li>
  <li class=""><a href="#">link</a></li>
</ul>

Additionally, I am encountering an error in my browser console:

 error: $("li").click() is not a valid function

javascript html jquery css class

Answer 1

Answer №1

Your code is functioning properly. However, it seems that you are encountering an error message

error: $("li").click(function() is not a valid function

. This error typically occurs when our custom JS code containing jQuery functions is loaded before the main jQuery script in the document.

To resolve this issue, ensure that the jQuery library code is placed within the HTML <head></head> tags

.active { color: red; }
.active a { color: red; }

<!doctype html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <ul class="navbar">
      <li class="active"><a href="#">link</a></li>
      <li class=""><a href="#">link</a></li>
      <li class=""><a href="#">link</a></li>
      <li class=""><a href="#">link</a></li>
      <li class=""><a href="#">link</a></li>
      <li class=""><a href="#">link</a></li>
    </ul>

    <!-- Your custom script here -->
    <script>
      $("li").click(function() {
        $("li").removeClass("active");
        $(this).addClass("active");
      });
    </script>
  </body>
</html>

Answer 2

Your code is functioning properly. However, it seems that you are encountering an error message

error: $("li").click(function() is not a valid function

. This error typically occurs when our custom JS code containing jQuery functions is loaded before the main jQuery script in the document.

To resolve this issue, ensure that the jQuery library code is placed within the HTML <head></head> tags

.active { color: red; }
.active a { color: red; }

<!doctype html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <ul class="navbar">
      <li class="active"><a href="#">link</a></li>
      <li class=""><a href="#">link</a></li>
      <li class=""><a href="#">link</a></li>
      <li class=""><a href="#">link</a></li>
      <li class=""><a href="#">link</a></li>
      <li class=""><a href="#">link</a></li>
    </ul>

    <!-- Your custom script here -->
    <script>
      $("li").click(function() {
        $("li").removeClass("active");
        $(this).addClass("active");
      });
    </script>
  </body>
</html>

How to apply an active class using Javascript and jQuery

Answer №1

Similar questions

An Easy Breakdown of How AJAX Works

Tips for utilizing identical properties across numerous styled elements:

Animate a list to expand and collapse the menu options

Collaboratively accessing a shared constant in two separate JavaScript files

What are some ways to style a DropDownList?

Arrangement of Columns in Bootstrap 4 - Three Columns Aligned Vertically on the Left, One on the Right

Autofill Dropdown in AngularJS Using Data from Previous Page

What is the best way to apply ngClass to style a JSON object based on its length?

Emulating navigator.onLine in Node.js

Aligning a div in relation to the background image

Unable to access a directive value within the controller

Sorting two different divisions is an example

Creating multiple dynamic routes in Next.js based on specific IDs

Determining a User's Connection Status in ReactJS: Cellular Network or WiFi?

Obtaining the selected value from multiple dropdown menus by clicking a button in Angular 6

Difficulty in adjusting the height of the popover menu that appears when using the Select Validator in Material UI

iOS Devices experiencing issue with beforeunload event not triggering

Acquiring the ClientID from a user control embedded within the application

PHP not displaying value upon submission

Ways to change a CSS rule for a class when the data-attribute value aligns with an anchor tag's value?