javascript - 更改按钮颜色并在单击时使其处于活动状态

Question

我希望当我单击两个按钮之一时，它会改变颜色并使其“活动”。而且因为它是性别按钮（M，F），所以只能选择两个中的一个。

<form>
  <div class="form-row">
    <div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" id="homme" type="button">Homme</button>
    <button class="btn btn-outline-secondary" id="femme" type="button">Femme</button>
  </div>
  <input type="text" class="form-control" id="nomcomplet" placeholder="Nom complet">
</div>
</div>
</form>

谢谢大家。

标签： javascripthtmljquerycsstwitter-bootstrap

Answer 1

将此 javascript 添加到您的文件中

let homme = document.getElementById("homme");
let femme = document.getElementById("femme");
homme.addEventListener("click", function(){
    homme.classList.add("active");
    femme.classList.remove("active");
});
femme.addEventListener("click", function(){
    femme.classList.add("active");
    homme.classList.remove("active");
});