I want to drop the active class in the parent and the underline class in the child when a new list item is clicked

Question

As already written in title, I want to delete active class in parent and underlined class in child when new list item is clicked and add these two classes on clicked item.

With the code written, I manage to remove the active and underline from the first element (the first element has class active and its child the class underline by default) when I click on a new link, but it stays fixed on the clicked links, while I want delete these two classes and activate them again.

So I want them to be active only for every link I click.

This is my code:

function sectclick(){
    let section=document.querySelectorAll(".ulmargin li");
    for (let i = 0; i < section.length; i++) {
        section[i].addEventListener("click", function() { 
            if( i != 0 ){
                section[0].classList.remove("active");                
                section[0].children[0].classList.remove("underline");
                section[i].classList.add("active");
                section[i].children[0].classList.add("underline");
            }
        })       
    }
}

<ul class="ulmargin">
    <li class="active"><a class="underline" href="#">Home</a></li>
    <li><a href="#divabout">About</a></li>
    <li><a href="#divservices">Services</a></li>
    <li><a href="#divskills">Skills</a></li>
    <li><a href="#diveducation">Education</a></li>
    <li><a href="#divexperience">Experience</a></li>
    <li><a href="#divwork">Work</a></li>
    <li><a href="#divblog">Blog</a></li>
    <li><a href="#divcontact">Contact</a></li>
</ul>

Can anyone help me fix the code to get what I want? I'm new to javascript.

DreamBold · Accepted Answer · 2023-01-04T18:37:37.353

You can try this code:

function sectclick() {
  let section = document.querySelectorAll(".ulmargin li");
  for (let i = 0; i < section.length; i++) {
    section[i].addEventListener("click", function() {
      for (let j = 0; j < section.length; j++) {
        section[j].classList.remove("active");
        section[j].children[0].classList.remove("underline");
      }
      section[i].classList.add("active");
      section[i].children[0].classList.add("underline");
    });
  }
}
sectclick();

a {
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

<ul class="ulmargin">
  <li class="active"><a class="underline" href="#">Home</a></li>
  <li><a href="#divabout">About</a></li>
  <li><a href="#divservices">Services</a></li>
  <li><a href="#divskills">Skills</a></li>
  <li><a href="#diveducation">Education</a></li>
  <li><a href="#divexperience">Experience</a></li>
  <li><a href="#divwork">Work</a></li>
  <li><a href="#divblog">Blog</a></li>
  <li><a href="#divcontact">Contact</a></li>
</ul>

You can use forEach instead for loop, and the JS code will look like:

function sectclick() {
  let section = document.querySelectorAll(".ulmargin li");

  section.forEach((elem) => {
    elem.addEventListener("click", function (event) {
      section.forEach((e) => {
        e.classList.remove("active");
        e.children[0].classList.remove("underline");
      });
      elem.classList.add("active");
      elem.children[0].classList.add("underline");
    });
  });
}
sectclick();

is there a different way to find a of each li? instead of writing section[i].children[0] or e.children[0] ? — Sarah, Jan 04 '23 at 18:43
Something like this: `e.firstChild.classList.remove("underline");` — DreamBold, Jan 04 '23 at 18:46
https://stackoverflow.com/questions/10381296/best-way-to-get-child-nodes You can read more about getting child elements here. Hope it helps! — DreamBold, Jan 04 '23 at 18:48
How to get the firstChild here: https://stackoverflow.com/questions/16302045/finding-child-element-of-parent-with-javascript — DreamBold, Jan 04 '23 at 18:49

score 0 · Answer 2 · answered Jan 04 '23 at 17:58

the first think I'm always doing in this king of case, is I put a function which "unselect all". Any click call first this unselect all and after I select.

const unSelectAll=()=> {
  Array.from(document.querySelector('.ulmargin').querySelectorAll('li')).forEach(el=> {
    el.classList.remove('active');
    el.querySelector('a').classList.remove('underline');
  }
  )
}

const setClick=()=> {
  Array.from(document.querySelector('.ulmargin').querySelectorAll('a')).forEach(el=> {
    el.addEventListener('click', function (evt) {
      unSelectAll();
      evt.target.classList.add('underline');
      evt.target.closest('li').classList.add('active');
    }
    )
  }
  )
}

setClick();

<ul class="ulmargin">
  <li class="active"><a class="underline" href="#">Home</a></li>
  <li><a href="#divabout">About</a></li>
  <li><a href="#divservices">Services</a></li>
  <li><a href="#divskills">Skills</a></li>
  <li><a href="#diveducation">Education</a></li>
  <li><a href="#divexperience">Experience</a></li>
  <li><a href="#divwork">Work</a></li>
  <li><a href="#divblog">Blog</a></li>
  <li><a href="#divcontact">Contact</a></li>
</ul>

I want to drop the active class in the parent and the underline class in the child when a new list item is clicked

2 Answers2