將標題重寫為:將重點放在控制台按鈕的工作上,而不是其他區域
P粉315680565
2023-09-02 09:28:50
<p>我有4個按鈕,當點擊它們時,我試圖將焦點設置在它們上面,以便用戶可以看到當前活動的按鈕。 </p>
<p>由於某種原因,在控制台中它的工作方式如預期一樣,當點擊按鈕時,它會添加焦點,根據CSS更改背景顏色,然後當點擊另一個按鈕時,第一個按鈕失去焦點,新按鈕獲得焦點。 </p>
<p>當我沒有打開控制台時,它不起作用。 </p>
<p>
<pre class="brush:js;toolbar:false;">const oneYear = document.getElementById('1Year');
const fiveYear = document.getElementById('5Year');
const tenYear = document.getElementById('10Year');
const twentyYear = document.getElementById('20Year');
function changeDate(date) {
if (date === 1) {
oneYear.className = " active";
setTimeout(oneYear.focus(), 1);
}
if (date === 5) {
fiveYear.focus();
fiveYear.className = " active";
}
if (date === 10) {
tenYear.focus();
}
if (date === 20) {
twentYear.focus();
}
}</pre>
<pre class="brush:css;toolbar:false;">.theme-dark-btn {
transition: all ease 1s;
background-image: linear-gradient(to left, #1ACC8D, #1ACC8D, #235FCD, #1C4CA3);
background-size: 300%;
background-position: 0 0;
border: 1px solid #1C4CA3;
font-weight: 600;
letter-spacing: 1px;
}
.theme-dark-btn:hover {
background-position: 100% 0;
border: 1px solid #1ACC8D;
}
.theme-dark-btn:focus {
background-color: #1ACC8D;
}
.theme-dark-btn:active {
background-color: #1ACC8D;
}
.btn {
height: 38px;
line-height: 35px;
text-align: center;
padding: 0 18px;
text-transform: uppercase;
transition: background-image .3s linear;
transition: box-shadow .3s linear;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
font-size: 12px !important;
}
.btn:focus {
background-color: #1ACC8D;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="col">
<button class="btn theme-dark-btn" type="button" style="color: white" id="1Year" onclick="changeDate(1)" autofocus>1 Year</button>
<button class="btn theme-dark-btn" style="color: white" id="5Year" onclick="changeDate(5)">5 Years</button>
<button class="btn theme-dark-btn" style="color: white" id="10Year" onclick="changeDate(10)">10 Years</button>
<button class="btn theme-dark-btn" style="color: white" id="20Year" onclick="changeDate(20)">20 Years</button>
</div></pre>
</p>
首先,當你點擊按鈕時,你已經使其獲得了焦點,你不需要動態地使其獲得焦點。
所以,為什麼背景顏色沒有改變呢?
因為
background-image
已經覆寫了background-color
你只需要設定
background
而不是background-color
完整的範例,不需要
JS