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

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

您可以使用JavaScript完成此操作。请注意，您还将ID添加到按钮中，但在您的样式中，您的目标是类。

null

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>