如何将焦点保持在选定的按钮上

Question

页面上有两个按钮，当您单击一个时，它会改变颜色。

单击旁边的空白字段后如何使该焦点不消失？

<button id="button1">Text 1</button>
<button id="button2">Text 2</button>

.button1 {
height: 48px;
width: 240px;}

.button1:hover {
background-color: red;}

.button1:focus {
background-color: green;}

.button2 {
height: 48px;
width: 240px;}

.button2:hover {
background-color: red;}

.button2:focus {
background-color: green;}

Answer 1

您可以使用 HTML 和 CSS 仅通过按照以下建议设置无线电输入标签的样式来做到这一点。

这种实现的优点是，如果您需要通过表单提交按钮值，则不必维护另一个元素（通过 javascript）。

 span { display: inline-block; position: relative; } span > input[type=radio] { visibility: hidden; position: absolute; } span > label { padding: 5px 10px; border: solid 1px #ccc; cursor: pointer; } span > label:hover { background-color: #fcfcfc; } span > input[type=radio]:checked + label { background-color: green; color: white; }

 <span> <input name="my-button" value="1" type="radio" id="my-button-1" /> <label for="my-button-1">Text 1</label> </span> <span> <input name="my-button" value="2" type="radio" id="my-button-2" /> <label for="my-button-2">Text 2</label> </span>

Answer 2

您可以使用 Javascript 来执行此操作。 请注意，您还向按钮添加了ids ，但在 styles 中，您的目标是classes 。

 let btns = document.querySelectorAll('button'); btns.forEach((btn)=> { btn.addEventListener('click', function() { if(document.querySelector('button.active')){ document.querySelector('button.active').classList.remove('active'); } btn.classList.add('active'); }); });

 #button1 { height: 48px; width: 240px;} #button1:hover { background-color: red;} #button1:focus, #button1.active { background-color: green;} #button2 { height: 48px; width: 240px;} #button2:hover { background-color: red;} #button2:focus, #button2.active { background-color: green;}

 <button id="button1">Text 1</button> <button id="button2">Text 2</button>