Question

195

How can I add and remove an active class to an element in pure JavaScript

rated 0 times [ 196] [ 1] / answers: 1 / hits: 129032 / 8 Years ago, wed, august 17, 2016, 12:00:00

I am trying to make a navigation menu I did all the HTML and CSS when come to javascript I am struck in the middle I am able to add a class to the element, but I am not able to remove the class remaining elements. Please help me with this.

here is my code

<!DOCTYPE html>

    <html>

    <head>

        <title>Navigation class Toggling</title>



        <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;

        }

        </style>

    </head>

    <body>

    <header>

        <nav>

            <ul onclick=myFunction(event)>

                <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>

    <script type=text/javascript>

        function myFunction(e) {

            e.target.className = active;

        }

    </script>

    </body>

    </html>

and here is my Codepen

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

destanyb

Add To Favorites

Follow

Total Points: 407

Total Questions: 88

Total Answers: 88

Location: Senegal

Member since Mon, Sep 5, 2022

2 Years ago

answered 8 Years ago kelsy · Accepted Answer

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;

}

JSFIDDLE

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;

}

JSFIDDLE 2

Edit

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

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>