將標題重寫為:將重點放在控制台按鈕的工作上,而不是其他區域
P粉315680565
P粉315680565 2023-09-02 09:28:50
0
1
467
<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>
P粉315680565
P粉315680565

全部回覆(1)
P粉020556231

首先,當你點擊按鈕時,你已經使其獲得了焦點,你不需要動態地使其獲得焦點。

所以,為什麼背景顏色沒有改變呢?

因為 background-image 已經覆寫了 background-color

你只需要設定 background 而不是 background-color

.btn:focus {
        background: #1ACC8D;
    }

完整的範例,不需要 JS

.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: #1ACC8D;
}
<div class="col">
  <button class="btn theme-dark-btn" type="button" style="color: white" id="1Year" autofocus>1 Year</button>
  <button class="btn theme-dark-btn" style="color: white" id="5Year">5 Years</button>
  <button class="btn theme-dark-btn" style="color: white" id="10Year">10 Years</button>
  <button class="btn theme-dark-btn" style="color: white" id="20Year">20 Years</button>
</div>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板