Cannot Change CSS Of A Different Div

So I have a list of three links that individually get the class name 'active' added to them sequentially such that when one link has it, the other two do not. Every link, when the

Solution 1:

A fast solution is to change the box class according to the time. This means that you should add in the css code

#boxes.box1{..} ... for this to work

function toggle() {
        var boxes = document.querySelectorAll('#one,#two,#three')
        var box = document.getElementById('boxes')

        // add active class to the current box
        boxes[i].classList.add('active')

   //what you can add 
        if (boxes[i].id === 'one') {
          box.classList.add('box1')
          box.classList.remove('box2')
          box.classList.remove('box3')
        } else if (boxes[i].id === 'two') {
          box.classList.add('box2')
          box.classList.remove('box1')
          box.classList.remove('box3')
        } else {
          box.classList.add('box3')
          box.classList.remove('box1')
          box.classList.remove('box2')
        }

        // remove active class from the previous one
        if (i === 0) {
          boxes[boxes.length - 1].classList.remove('active')
        } else {
          boxes[i - 1].classList.remove('active')
        }

        i++

        if (i >= boxes.length) {
          i = 0
        }
      }

Solution 2:

The ~ selector works for elements which share the same parent. The parent of your <a> tags is <li>, whereas the parent of your <div id="boxes"> is <div id ="container">

In order to achieve the target described in your question, you should operate on "active" class, which is associated directly with <div id ="boxes"> instead of having ~ selector stuff