Javascript 在5行中单击时更改单个div的背景色，并在单击其他div时重置？_Javascript_Button_Colors_Background

Javascript 在5行中单击时更改单个div的背景色，并在单击其他div时重置？

javascript button colors

Javascript 在5行中单击时更改单个div的背景色，并在单击其他div时重置？,javascript,button,colors,background,Javascript,Button,Colors,Background,当我陷入困境时，我在这个网站上找到了很多有用的答案，现在我发现自己迷失了方向，因为我对这个问题非常陌生，不懂任何javascript 我正在尝试向我的网站添加一个功能，其中包括5个按钮，每个按钮下面都有一个div（我有这个按钮的切换代码，但是这对你们来说可能听起来很容易，但我如何在点击div时改变背景颜色，然后在他们点击其他div时重置它，这应该对5个div中的每一个都有效 .btnmtb{ 右边距：5px；触摸动作：操作；光标：指针；背景色：#1E2327；填充：20px 0px

当我陷入困境时，我在这个网站上找到了很多有用的答案，现在我发现自己迷失了方向，因为我对这个问题非常陌生，不懂任何javascript

我正在尝试向我的网站添加一个功能，其中包括5个按钮，每个按钮下面都有一个div（我有这个按钮的切换代码，但是

这对你们来说可能听起来很容易，但我如何在点击div时改变背景颜色，然后在他们点击其他div时重置它，这应该对5个div中的每一个都有效


.btnmtb{
右边距：5px；
触摸动作：操作；
光标：指针；
背景色：#1E2327；
填充：20px 0px；
文本对齐：居中；
}
.btnmtb h1{
颜色：#fff；
}
.btnmtb h4{
颜色：#fff；
}
.btnmp{
颜色：#fff；
字体系列：“Ubuntu”，无衬线；
字体大小：14px；
填充：0px 20px 0px 20px；
}

越野
硬尾-100/120mm
专为轻型越野车道设计的eMountain自行车

越野
全表面-100/120mm
快节奏的eMTB专为带后悬架的轻轨设计

追踪
全不锈钢-140/150mm
中程旅行-更具雄心壮志的eMTB骑手的完美武器

忍耐
全表面-160/170mm
专为最恶劣的地形设计的长行程Emoontain自行车

肥胖者
大型轮胎-100/120mm
看起来像是从漫画书上掉下来的表情自行车

HTML

CSS

请使用此javascript代码（已更新）

var elements=document.getElementsByClassName（'btnmtb'）；
对于（var i=0；i

正是我想要的。太棒了。非常感谢。嘿，苏尼尔，我刚刚注意到，在safari等移动平台上，背景色并没有取消选择。你知道为什么会这样吗？可以在这里看到-->你好，亚当，谢谢你喜欢我的回答。我会尝试在移动平台上解决这个问题，然后再联系你。@AdamWolfe，我知道了我做了一些更改。请使用此代码。现在它适用于所有平台

<body>
  <div class="container">
    <div style="background-color:red;width:50%" class="element active">
      Red
    </div>
    <div style="background-color:yellow;width:50%" class="element">
      Yellow
    </div>
    <div style="background-color:blue;width:50%" class="element">
      Yellow
    </div>
    <div style="background-color:black;width:50%" class="element">
      Yellow
    </div>
    <div style="background-color:white;width:50%" class="element">
      Yellow
    </div>
  </div>
</body>

$(".element").on("click",function()
{
    $(".element").removeClass("active");

  $(this).addClass("active");
});

.active{
  background-color:green !important;
}

var elements = document.getElementsByClassName('btnmtb');
for (var i = 0; i < elements.length; i++) {
     elements[i].addEventListener('click', function() {
        for (var j = 0; j < elements.length; j++) {
           if (elements[j].hasAttribute("style")) {
             elements[j].setAttribute('style', '');
           }
        }
        this.style.backgroundColor = "red";
     }, false);
};