如何添加保持激活状态的活动类

Question

我网站的一个部分有一个比较奇怪的问题。我包括了不再起作用的部分。通常，按钮应保持相同的大小，并且在单击时应为深蓝色。但是现在，它只是获得了一个基本的 html 按钮。这很奇怪，因为几天前代码运行得非常好，我什么都没做。

var header = document.getElementById("flex-wrapper-zahlung");

var btns = header.getElementsByClassName("accordion-zahlung");

for (var y = 0; y < btns.length; y++) {

  btns[y].addEventListener("click", function() {

    var current = document.getElementsByClassName("activated");

    if (current.length > 0) {

      current[0].className = current[0].className.replace("activated", "");

    }

    this.className += "activated";

  });

}

.flex-wrapper-zahlung {

  margin: 0 0 0 0;

  width: 24em;

}

.accordion-zahlung {

  display: flex;

  background-color: #ededed;

  color: black;

  cursor: pointer;

  padding: .75em;

  width: 30em;

  border: none;

  text-align: left;

  outline: none;

  font-size: 1em;

  font-weight: 500;

  transition: 0.4s;

  margin: .5em 0 0 0;

  border-radius: .5em;

}

.activated,

.accordion-zahlung:hover {

  background-color: #092a5e;

  color: white;

}

<div id="flex-wrapper-zahlung">

  <button class="accordion-zahlung"><i class="far fa-credit-card"></i> &nbsp; &nbsp; Kreditkarte</button>

  <button class="accordion-zahlung"> <i class="fas fa-file-invoice"></i> &nbsp; &nbsp; &nbsp; Lastschrift</button>

  <button class="accordion-zahlung"><i class="fab fa-paypal"></i> &nbsp; &nbsp; &nbsp; PayPal</button>

  <button class="accordion-zahlung"><i class="fas fa-money-check"></i> &nbsp; &nbsp; Rechnung</button>

</div>

Answer 1

您需要为激活的类添加空间，即" activated".