Add Active Class Onclick Javascript Codepen

MUAZHAN

4 min read

·

Jun 22, 2024

43

Share

Adding an Active Class with OnClick in JavaScript (CodePen Example)

This article will guide you through the process of adding an "active" class to an element using JavaScript's onclick event in CodePen. This technique is commonly used for creating navigation menus, tabbed interfaces, or dynamic interactions in web pages.

Understanding the Concept

The core idea is to use the onclick event to trigger a JavaScript function that modifies the class attribute of the target element. We'll add the "active" class to the clicked element while removing it from any previously active elements.

CodePen Example

  
  



  

    
Item 1
    
Item 2
    
Item 3
  

  

Explanation:

1. HTML Structure: We create a simple unordered list (<ul>) with list items (<li>). Each list item represents a navigation link and has the class nav-item. We use the onclick attribute to call the setActive function when an item is clicked, passing the clicked element (this) as an argument.

2. CSS Styles: Basic styles are applied to the navigation items, and the .active class is used to apply a background color to the selected item.

3. JavaScript Function:

   • setActive(element): This function takes the clicked element (element) as input.
   • Remove Existing Active Class: It uses querySelectorAll to select all elements with the class nav-item and then iterates through them using forEach. For each element, it removes the active class using classList.remove('active').
   • Add Active Class: It adds the active class to the clicked element using element.classList.add('active').

Key Points

• Event Listener: The onclick attribute is a simple way to trigger a function on click. You can also use the addEventListener method for more advanced event handling.
• Class Manipulation: classList.add() and classList.remove() are useful methods for dynamically managing CSS classes.
• Specificity: The CSS styles for .active must be specific enough to override the default styles of the .nav-item class.

By applying these techniques, you can easily create dynamic navigation menus, tabbed interfaces, and other interactive elements on your web pages.