在连续 5 中单击时更改单个 div 的背景颜色并在单击另一个时重置？答案

【问题标题】：Change background color of individual div when clicked in a row of 5 and reset when another is clicked?在连续 5 中单击时更改单个 div 的背景颜色并在单击另一个时重置？
【发布时间】：2017-08-11 07:55:03
【问题描述】：

当我遇到困难时，我在这个网站上找到了很多有用的答案，现在我发现自己迷路了，因为我对此很陌生并且不知道任何 JavaScript。

我正在尝试向我的网站添加一项功能，其中包括 5 个按钮，每个按钮下方显示一个 div（我有用于切换的代码，这没关系，但是！！

这对你们来说可能听起来很容易，但是我如何在单击 div 时更改背景颜色，然后在单击其他 div 之一时重置它，这应该适用于 5 个中的每一个。

<style type="text/css">
.btnmtb{
margin-right: 5px;
touch-action: manipulation;
cursor: pointer;
background-color: #1E2327;
padding: 20px 0px;
text-align: center;
}


.btnmtb h1 {
color: #fff;

}

.btnmtb h4 {
color: #fff;

}

.btnmtb p {
color: #fff;
font-family: 'Ubuntu', sans-serif;
font-size: 14px;
padding: 0px 20px 0px 20px;

}

</style>

<div class="disciplines">
<div class="row">
<div class="btnmtb col-md-2 col-md-offset-1 box1">
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p>
<h1>Cross Country</h1>
<h4>Hardtail - 100/120mm</h4>
<p>eMountain Bikes designed for light offroad trails</p>
<i class="fa fa-chevron-down"></i>
</div>
<div class="btnmtb col-md-2 box2">
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p>
<h1>Cross Country</h1>
<h4>FullSus - 100/120mm</h4>
<p>Fast paced eMTB's designed for light trail with rear suspension</p>
<i class="fa fa-chevron-down"></i>
</div>
<div class="btnmtb col-md-2 box3">
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p>
<h1>Trail</h1>
<h4>FullSus - 140/150mm</h4>
<p>Mid Travel - perfect weapons for the more ambitious eMTB rider</p>
<i class="fa fa-chevron-down"></i>
</div>
<div class="btnmtb col-md-2 box4">
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p>
<h1>Enduro</h1>
<h4>FullSus - 160/170mm</h4>
<p>eMountain bikes with long travel designed for the toughest terrain</p>
<i class="fa fa-chevron-down"></i>
</div>
<div class="btnmtb col-md-2 box5">
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p>
<h1>Fatbike</h1>
<h4>Large Tyres - 100/120mm</h4>
<p>The eMountain bikes that look like they have dropped out of a comic book</p>
<i class="fa fa-chevron-down"></i>
</div>
</div>

【问题讨论】：

标签： javascript button colors background

【解决方案1】：

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

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

【讨论】：

正是我所追求的。惊人的。非常感谢。
嘿 Sunil，我刚刚注意到背景颜色在 safari 等移动平台上没有取消选择。知道为什么会这样吗？
可以在这里看到实际操作 --> charged.bike/ebike-buyers-guides/electric-mountain-bikes
你好亚当，感谢我的回答。我会尝试在移动平台上解决此问题并回复您。
@AdamWolfe，我做了一些改变。请使用此代码。现在它适用于所有平台

【解决方案2】：

HTML

<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>

JavaScript+JQuery

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

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

CSS

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

JSFiddle

【讨论】：