Adding and removing active class from elements

Asked
Active3 hr before
Viewed126 times

8 Answers

removingactiveadding
90%

Use document.querySelectorAll to find the element which currently have the active class, then you can remove that class.,Instead of iterating through the entire collection you can select the element which have a class active using document.queryselector. Also provide an id to the ul so that you can target the specific element,Use Document.querySelectorAll()to returnsa elements within the document that match the specified group of CSS selectors.

Use document.querySelectorAll to find the element which currently have the active class, then you can remove that class.

function myFunction(e) {
   var elems = document.querySelectorAll(".active");
   [].forEach.call(elems, function(el) {
      el.classList.remove("active");
   });
   e.target.className = "active";
}

Instead of document.querySelectorAll you can also use document.querySelector

 function myFunction(e) {
    var elems = document.querySelector(".active");
    if (elems !== null) {
       elems.classList.remove("active");
    }
    e.target.className = "active";
 }
function myFunction(e) {
   if (document.querySelector('#navList a.active') !== null) {
      document.querySelector('#navList a.active').classList.remove('active');
   }
   e.target.className = "active";
}
<style type="text/css">* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  width: 100%;
  height: auto;
  max-width: 600px;
  margin: 0 auto;
}

nav {
  width: 100%;
  height: 40px;
  background-color: cornflowerblue;
}

ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

a {
  text-decoration: none;
  padding: 8px 15px;
  display: block;
  text-transform: capitalize;
  background-color: darkgray;
  color: #fff;
}

a.active {
  background-color: cornflowerblue;
}
<title>Navigation class Toggling</title>

<header>
   <nav>
      <ul onclick="myFunction(event)" id='navList'>
         <li><a href="#">home</a></li>
         <li><a href="#">about</a></li>
         <li><a href="#">service</a></li>
         <li><a href="#">profile</a></li>
         <li><a href="#">portfolio</a></li>
         <li><a href="#">contact</a></li>
      </ul>
   </nav>
</header>
load more v
88%

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.,If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.,Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

Pretag
 Pretag team - issue, fix, solve, resolve
72%

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.,Following is the syntax of addClass() method:,Following is the syntax of removeClass() method:

Pretag
 Pretag team - issue, fix, solve, resolve
65%

Pretag
 Pretag team - issue, fix, solve, resolve
75%

Learn how to add an active class to the current element with JavaScript.,Highlight the active/current (pressed) button:,If you do not have an active class set on the button element to start with, use the following code:

Pretag
 Pretag team - issue, fix, solve, resolve
40%

How to add active class on click event in custom list group in Bootstrap 4 ?,In Bootstrap 4, Javascript or jQuery events are used to add active class on click event in custom list group.,Example 1: Below example illustrates how to add active class on click event in custom list group using jQuery through for loop.

Syntax:

$(document).ready(function() {
   $('selector').click(function() {
      $('selector.active').removeClass("active");
      $(this).addClass("active");
   });
});
load more v
22%

The above code will add the active class to the li tag whenever the user clicks on the Li element. You might notice here every time li gets clicked it adds an active class and this is not what we want to do. Each time the Li tag gets clicked it remove an active class from all other li items and add it to the current clicked LI. Yes for this we use removeClass() method to check my previous article.  ,How to remove class using jQuery?,Get the latest and greatest from Codepedia delivered straight to your inbox.

CODE:

$("#navMenus").on('click', 'li', function() {
   $(this).addClass("active"); // adding active class
});
load more v
60%

You're removing the 'active' class from the closest li's child element, and then you're adding the active class to the current a's parent li. In the spirit of keeping the active class on the anchors and not the list items, this will work for you:,The active link is the active link. There'd never be more than one link active at any given time, so there's no reason to be all specific about removing the active class. Just remove from all anchors.

You're removing the 'active' class from the closest li's child element, and then you're adding the active class to the current a's parent li. In the spirit of keeping the active class on the anchors and not the list items, this will work for you:

    $('li a').click(function(e) {
       e.preventDefault();
       $('a').removeClass('active');
       $(this).addClass('active');
    });

Other "removing-active" queries related to "Adding and removing active class from elements"