更改按钮颜色并在单击时使其处于活动状态[关闭]答案

【问题标题】：Change button color and making it active when clicked [closed]更改按钮颜色并在单击时使其处于活动状态[关闭]
【发布时间】：2020-09-29 17:06:11
【问题描述】：

我希望当我单击两个按钮之一时，它会改变颜色并使其“处于活动状态”。而且因为是性别按钮（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>

谢谢大家。

【问题讨论】：

你能添加有问题的代码吗？这样我们就可以看到它在哪里坏了。
你是如何尝试在 js 上实现这一点的？
"...因为它是性别按钮 (M, F)，...只能选择两个中的一个。" - 您可能需要检查这个假设与您的客户相比，“性别”不一定是曾经的二元选择。

标签： javascript html jquery css twitter-bootstrap

【解决方案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");
});

【讨论】：

【解决方案2】：

我建议你尝试在类或标签中使用:focus 的伪:active 来应用颜色。

此外，使用 JS，您可以添加、删除或切换名为 active 的类：

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

ClassName 示例：

https://www.w3schools.com/howto/howto_js_active_element.asp

亲切的问候

【讨论】：