在第5行中单击时更改单个div的背景颜色，在单击另一行时重置？

Question

当我陷入困境时，我在该网站上找到了很多有用的答案，现在我迷失了方向，因为我对此很陌生，不知道任何JavaScript。

我正在尝试向我的网站添加一个功能，该功能将包括5个按钮，这些按钮在每个按钮的下方都显示一个div（我有对此进行切换的代码，但是！！！

这听起来很容易，但是当单击div时如何更改背景颜色，如果他们单击其他div之一，则如何重置背景色，这应该适用于5个div。

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

Answer 1

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

Answer 2

请使用此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);
};

在第5行中单击时更改单个div的背景颜色，在单击另一行时重置？

问题描述

2 个解决方案

解决方案1
0 2017-03-20 06:52:55

解决方案2
0 已采纳 2017-03-20 07:09:35

在第5行中单击时更改单个div的背景颜色，在单击另一行时重置？

问题描述

2 个解决方案

解决方案1 0 2017-03-20 06:52:55

解决方案2 0 已采纳 2017-03-20 07:09:35

解决方案1
0 2017-03-20 06:52:55

解决方案2
0 已采纳 2017-03-20 07:09:35