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

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>

谢谢大家。

Answer 1

将此JavaScript添加到文件中

body

Answer 2

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

• https://developer.mozilla.org/en-US/docs/Web/CSS/:active
• https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

此外，使用JS，您可以添加和删除或切换一个名为active的带有样式的类：

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

具有ClassName的示例：

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

亲切的问候