Add/Remove active class JavaScript

Question

There is my solution. There is not working. I don't know why:(

document.addEventListener("DOMContentLoaded", function()
{
    //let headers = document.querySelector(".nav");
    let active = document.querySelectorAll(".nav-el");
    for(let i = 0; i< active.length; i++)
    {
        active[i].addEventListener("click", function()
        {
            let current = document.getElementsByClassName("nav-el-active");
            current[0].classList.remove("nav-el-active");
            this.classList.add("nav-el-active");
        });
    }
})

Answer 1

Use forEach and querySelectorAll . See the restructured example:

 document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll(".nav-el").forEach(function(el) { el.addEventListener("click", function() { removeClasses(); this.classList.add("nav-el-active"); }); }); }); function removeClasses() { document.querySelectorAll(".nav-el-active").forEach(function(el) { el.classList.remove("nav-el-active"); }); }

 body { background: #fff; margin: 0; }.nav { list-style:none; padding:0; margin: 10px; display: flex; justify-content: center; }.nav-el { background: rgba(231,29,54,1); box-shadow:0 5px 5px -3px rgba(231,29,54,0.3); margin-right:1px; flex-grow:1; transition: 0.5s background-color; display: flex; position: relative; }.nav-el:first-child { border-radius: 5px 0 0 5px; }.nav-el:last-child { border-radius: 0 5px 5px 0; }.nav-link { padding:2rem; display: block; display: flex; flex-grow:1; justify-content: center; align-items: center; font-family: sans-serif; text-transform: uppercase; text-decoration: none; text-align: center; color:#fff; font-weight: bold; }.nav-el-active { background: #7200da; box-shadow:0 5px 15px -3px rgba(114,0,218,0.5); } @media (max-width:1000px) {.nav { flex-wrap: wrap; }.nav-el { width:33.3333%; margin-bottom:1px; } } @media (max-width:400px) {.nav { flex-wrap: wrap; }.nav-el { width:100%; margin-bottom:1px; } }

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> <link rel="stylesheet" href="css/style.css"> <script defer src="js/app.js"></script> </head> <body> <ul class="nav"> <li class="nav-el nav-el-active"> <a href="#" class="nav-link">Strona główna</a> </li> <li class="nav-el"> <a href="#" class="nav-link">Galeria</a> </li> <li class="nav-el"> <a href="#" class="nav-link">Nowości</a> </li> <li class="nav-el"> <a href="#" class="nav-link">Nasze prace</a> </li> <li class="nav-el"> <a href="#" class="nav-link">Nasz zespół</a> </li> <li class="nav-el"> <a href="#" class="nav-link">Kontakt</a> </li> </ul> </body> </html>

Add/Remove active class JavaScript

Question

1 answers

solution1
1 2019-10-24 09:04:31

Add/Remove active class JavaScript

Question

1 answers

solution1 1 2019-10-24 09:04:31

solution1
1 2019-10-24 09:04:31