Javascript 如何使我的滑块在标签下方移动时更改颜色？

我有一个基本的滑块，当你点击标签时，它会在标签下方移动，但我想让它根据当前的标签改变颜色。以下是一个片段：

var-element=document.querySelectorAll（“#home，#web，#design”）；
对于（变量i=0；i

#菜单{
宽度：50%；
保证金：0；
左侧边缘：15em；
文字装饰：无；
列表样式：无；
文本对齐：居中；
}
#菜单ul，#菜单li{
显示：内联；
}
#菜单a{
显示：内联块；
宽度：25%；
填充：.750；
文字装饰：无；
颜色：浅灰色；
过渡：颜色。15s；
}
#菜单a：活动{
颜色：白色；
}
#菜单a：悬停{
颜色：白色；
}
#home.active~hr{
剩余利润：14.5%
}
#web.active~hr{
剩余利润：40%
}
#design.active~hr{
剩余利润率：65.5%
}
#滑块{
高度：.25雷姆；
宽度：20%；
保证金：0；
背景：番茄；
边界：无；
过渡：0.3s缓进缓出；
}

根据您当前的代码，我会这样做

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";
    }
    
  });
} 

var-element=document.querySelectorAll（“#home，#web，#design”）；
对于（变量i=0；i

---

因此，您可以提取单击列表元素（例如web）的ID，然后使用一系列if语句更改CSS。但是，我建议创建CSS类并根据单击元素的ID分配它们。

对于在（DOM）中没有相关性的元素，如美观边界，通常使用伪元素，您可以更好地操纵它们，希望我能帮助您！

---

@Danilovanovic具有唯一的滑块颜色，具体取决于滑块当前所在的选项卡。目前它都是红色的，但举例来说，如果它在中间的标签上，我希望它是蓝色的。这能回答你的问题吗？嘿，这似乎工作完美无瑕，非常感谢你！我也会像你建议的那样尝试CSS啊哈，非常感谢，祝你有一个愉快的一天。不用担心，我会使用CSS类，这样所有的颜色都会在样式表中设置，所以代码更易于维护，但是你可以将所有的颜色都设置为不同的if语句，它仍然可以正常工作。嗨，谢谢，我会检查的！我发布的代码片段使用JS使滑块在单击选项卡时从左向右移动。它也会与CSS兼容吗？

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