我在使用 2 個按鈕時遇到問題，每個按鈕切換不同的“div”元素。我想默認關注“按鈕 1”。我怎么做？自動對焦不作業。
這是 HTML 代碼
<div class="filter">
<button class="filter-btn active" data-target="#block-1" autofocus>1</button>
<button class="filter-btn" data-target="#block-2">2</button>
</div>
這是JS代碼
let $blocks = $(".block-card");
$(".filter-btn").on("click", (e) => {
let $btn = $(e.target).addClass("active");
$btn.siblings().removeClass("active");
let selector = $btn.data("target");
$blocks.removeClass("active").filter(selector).addClass("active");
});
uj5u.com熱心網友回復：
如果autofocus由于瀏覽器行為或其他元素的樣式而無法正常作業，您仍然可以使用 Javascript 來設定焦點。
例子：
document.querySelector(".filter-btn.active").focus({focusVisible: true});
{focusVisible: true}在這里是可選的，它強制瀏覽器使焦點可見。
有一個 jQuery 等效項，但它似乎不采用可選配置。
例子：
$(".filter-btn.active").focus();
可以添加一些 CSS 以使測驗更容易。
例子：
button:focus {
color: crimson;
}
button:focus-visible {
outline: 2px solid crimson;
border-radius: 3px;
}
運行以下示例時，請注意應聚焦第一個按鈕。
完整示例：（使用下面的按鈕實時運行）
document.querySelector(".filter-btn.active").focus({focusVisible: true});button:focus{ color: crimson }
button:focus-visible {
outline: 2px solid crimson;
border-radius: 3px;
}<div class="filter">
<button class="filter-btn active" data-target="#block-1">1</button>
<button class="filter-btn" data-target="#block-2">2</button>
</div>希望這會有所幫助！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/534732.html