我尝试在单击单独的'switch'元素（使按钮组可见）时将其中一个按钮设置为focus或active。 这是在页面加载之后很长时间的事情，因此自动聚焦将不起作用。
我好像不能让它工作。 也许button元素的焦点不能通过DOM选择器触发。
我尝试对元素调用focus()，但似乎没有用。 我可以循环和做每个元素的样式，但它只是似乎有一个更好的方式。
请有人能提出一个办法来做这件事吗？ 在这个阶段，我更喜欢DOM选择器，因为我试图在继续使用jquery或其他技术之前更熟悉它。
下面是html和CSS代码:
<style>
.btn-group button {
background-color: #b9b9b9; /* Green background, orange: #ffb748 */
border: 1px solid grey; /* Green border, orange: #ffa00c */
color: white; /* White text */
padding: 10px 24px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
width: 50%; /* Set a width if needed */
display: block; /* Make the buttons appear below each other */
margin-left: auto;
margin-right: auto;
}
.btn-group button:not(:last-child) {
border-bottom: none; /* Prevent double borders */
}
/* Add a background color on hover, focus & reset on blur */
.btn-group button:hover {
background-color: grey;
}
.btn-group button:focus {
background-color: grey;
}
.btn-group button:blur {
background-color: #b9b9b9 /*#4CAF50*/;
}
</style>
<div style="width: 50%">
<div class="btn-group">
<button id="one">Apple</button>
<button id="two">Samsung</button>
<button id="three">Sony</button>
</div>
</div>
并从浏览器控制台中:
document.querySelector('#one').focus();
.focus()应该可以正常工作，请参见下面的片段。
你确定你是从正确的地方打给JS的吗？ 查询是否确实找到了一个元素？ 您可以在调用focus查看查询结果之前console.log。
null
setTimeout(() => document.querySelector('#one').focus(), 1000);
setTimeout(() => document.querySelector('#two').focus(), 2000);
setTimeout(() => document.querySelector('#three').focus(), 3000);
setTimeout(() => document.querySelector('#one').focus(), 4000);
setTimeout(() => document.querySelector('#two').focus(), 5000);
setTimeout(() => document.querySelector('#three').focus(), 6000);.btn-group button {
background-color: #b9b9b9;
border: 1px solid grey;
color: white;
padding: 10px 24px;
cursor: pointer;
display: block;
width: 50%;
}
.btn-group button:hover {
background-color: grey;
}
.btn-group button:focus {
background-color: grey;
}
.btn-group button:blur {
background-color: #b9b9b9;
}<div style="width: 50%">
<div class="btn-group">
<button id="one">Apple</button>
<button id="two">Samsung</button>
<button id="three">Sony</button>
</div>
</div>