How to make my slider change color when moving below tabs?

Question

I have a basic slider that moves below tabs when you click them, but i would like for it to change color depending on WHICH TAB it currently is. Here is a snippet :

var element = document.querySelectorAll("#home, #web, #design");
for (var i = 0; i < element.length; i++) {
  element[i].addEventListener("click",function(x){
    if(document.querySelector(".active")){
      document.querySelector(".active").classList.remove("active");
    }
    x.currentTarget.classList.add("active");
  });
}

#menu {
    width: 50%;
    margin: 0;
    margin-left: 15em;
    text-decoration: none;
    list-style: none;
    text-align: center;
}


#menu ul, #menu li {
    display: inline;
}

#menu a {
    display: inline-block;
    width: 25%;
    padding: .75rem 0;
    text-decoration: none;
    color: lightgray;
    transition: color .15s;
}

#menu a:active {
    color: white;
}

#menu a:hover {
    color: white;
}

#home.active ~ hr {
    margin-left: 14.5%
}

#web.active ~ hr {
    margin-left: 40%
}

#design.active ~ hr {
    margin-left: 65.5%
}

#slider {
    height: .25rem;
    width: 20%;
    margin: 0;
    background: tomato;
    border: none;
    transition: 0.3s ease-in-out;
}

<nav>
    <ul id="menu">
        <li id="home" class="active"><a href="#home">Accueil</a></li>
        <li id="web"><a href="#web">Web</a></li>
        <li id="design"><a href="#design">Design</a></li>
        <hr id="slider"/>
    </ul>
</nav>

I hope this isn't too stupid or bad, i was trying to figure it out but no luck on my end so hopefully this isn't too much of an issue. Thank you for your time.

@DaniloIvanovic To have a unique slider color depending on which tab the slider is currently. Currently it's all red, but for exemple if it's on the middle tab i want it to be blue. — Dreamy, Nov 24 '20 at 14:56
Does this answer your question? [How can I change an element's class with JavaScript?](https://stackoverflow.com/questions/195951/how-can-i-change-an-elements-class-with-javascript) — Danilo Ivanovic, Nov 24 '20 at 14:59

score 1 · Accepted Answer · answered Nov 24 '20 at 14:57

With your current code I'd do something like this

var element = document.querySelectorAll("#home, #web, #design");

for (var i = 0; i < element.length; i++) {
  element[i].addEventListener("click",function(x){
    if(document.querySelector(".active")){
      document.querySelector(".active").classList.remove("active");
    }
    x.currentTarget.classList.add("active");
    var id= x.target.parentElement.id
    if (id == "web"){
      document.getElementById('slider').style.background = "blue";
    }
    
  });
}

So you can extract the ID of clicked list element e.g. web and then change the CSS with a series of if statements. However I'd recommend making CSS classes and assigning them based on the ID of the clicked element.

Hey that seems to work flawlessly, thank you so much! I will also try with the CSS like you suggested ahah, many thanks, have a good day. — Dreamy, Nov 24 '20 at 14:59
No worries, I'd use the CSS classes just so all the colours are set in the stylesheet, so the code is more maintainable, but you could just set all the colours as different if statements, and it would still work just fine. — David_2002, Nov 24 '20 at 15:02

score 0 · Answer 2 · answered Nov 24 '20 at 15:07

For elements that have no relevance in the (DOM), like an aesthetic border, pseudo elements are usually used, you could manipulate them in a better way, I hope I can help you! https://developer.mozilla.org/es/docs/Web/CSS/Pseudoelementos

#menu {
    width: 100%;
    margin: 0;
    //margin-left: 15em;
    text-decoration: none;
    list-style: none;
    text-align: center;
}

#menu li::before {
  content: "";
  position: absolute;
  bottom: -10px;
  width: 70%;
  height: 2px;
  opacity: 0;
}

#home.active::before {
  opacity: 1;
  background-color: red;
}

#web.active::before {
  opacity: 1;
  background-color: blue;
}

#design.active::before {
  opacity: 1;
  background-color: green;
}


#menu ul, #menu li {
  display: inline;
  position: relative;
}

#menu a {
    display: inline-block;
    width: 25%;
    padding: .75rem 0;
    text-decoration: none;
    color: lightgray;
    transition: color .15s;
}

#menu a:active {
    color: white;
}

#menu a:hover {
    color: white;
}

Hi, thank you i'll check that out! The snippet i posted uses JS to make the slider move from left to right as you click the tabs. Will it be compatible with that CSS too? — Dreamy, Nov 24 '20 at 15:31

How to make my slider change color when moving below tabs?

2 Answers2