第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Bootstrap 4 按鈕如何在不引用 CSS 類的情況下更改移動視圖中的狀態(tài)?

Bootstrap 4 按鈕如何在不引用 CSS 類的情況下更改移動視圖中的狀態(tài)?

BIG陽 2023-07-20 15:02:52
我有一個基本示例,其中在基本模塊化彈出窗口中填充了一些按鈕。我想問他們?nèi)绾螌顟B(tài)從活動狀態(tài)更改為非活動狀態(tài),因為在我的代碼中我沒有看到任何可見的變化。我添加自定義 JS 以在單擊操作上添加“活動”類,并在第二次單擊時刪除,但即使沒有附加“活動”類,仍然至少有一個按鈕(最近單擊的)保持選中狀態(tài)。我已經(jīng)在 Codepen.io https://codepen.io/krzysztof-d/pen/rNLqdMv中準備了代碼示例 ,但我發(fā)現(xiàn)那里的那些按鈕的行為甚至不同,因為它們沒有像默認情況下那樣保持選中狀態(tài),正確的?請讓我知道我缺少什么<button type="button" class="btn btn-outline-secondary w-100">1</button>更新:因此,按鈕的默認行為會有所不同,具體取決于是在桌面視圖還是移動視圖中。您可以在 Codepen 示例上進行測試 - 在移動設備中,最后單擊的按鈕保持“選定/深色”(更改顏色并圍繞其焦點),而在桌面視圖中,鼠標離開后,它會立即變回白色?,F(xiàn)在,我致力于通過添加活動狀態(tài)來選擇多個按鈕 - 但我不知道如何處理這種移動行為,因為即使沒有附加“活動”類,至少有一個按鈕看起來像是被選中的。我的問題是如何以編程方式使此類按鈕再次看起來正常(與其他未選擇的按鈕一樣)?換句話說,進行多重選擇似乎不是問題,但如果有人犯了錯誤,我想允許取消選擇某些按鈕,這就是奇怪的部分所在。這是 Codepen 的另一個鏈接,其中包含相同的示例,其中添加了一些 JS 以從按鈕添加/刪除活動類 - 在移動視圖中查看https://codepen.io/krzysztof-d/pen/OJXBwYm,嘗試選擇一個幾個數(shù)字,然后取消選擇一兩個。根據(jù)請求更新屏幕截圖 - 移動視圖中的按鈕 6 似乎已被選中,但實際上它只是被取消選擇,并且類 .active 已從中刪除。
查看完整描述

1 回答

?
翻翻過去那場雪

TA貢獻2065條經(jīng)驗 獲得超14個贊

首先,您不需要編寫自己的 JavaScript 來切換.active按鈕上的類。Bootstrap 有您可以使用的按鈕插件:

<button?type="button"?class="btn?btn-outline-secondary?w-100"?
????????data-toggle="button"?aria-pressed="false">1</button>

.active當選擇/取消選擇按鈕時,這會自動切換類。

jsfiddle演示:?https://jsfiddle.net/davidliang2008/mfqyp8j3/6/


其次,當您選擇一個按鈕時,會發(fā)生兩件事。Bootstrap 添加.active(如果您使用按鈕插件)和.focus類:

http://img4.sycdn.imooc.com/64b8dc580001aad905440052.jpg

  • .active:為您提供與懸停按鈕時相同的背景背景

  • .focus:在按鈕周圍添加陰影

當您單擊其他位置時,只會.focus刪除類。這就是為什么您應該看到按鈕充滿了背景顏色,沒有陰影,就像您將鼠標懸停在按鈕上一樣。

當您取消選擇一個按鈕但鼠標仍然指向它時,.active類將被刪除,但懸停效果仍然.focus繼續(xù),使按鈕看起來就像您沒有取消選擇它一樣。

一旦鼠標移開,懸停效果就會消失,只剩.focus下懸停效果。這就是為什么您應該看到按鈕只有陰影。


如果你想進一步區(qū)分按鈕的選擇和取消選擇狀態(tài),你可以編寫CSS來禁用懸停效果,如果按鈕是但.focus不是.active

.selector .btn.focus:not(.active):hover {

? ? color: inherit;

? ? background-color: inherit;

? ? border-color: inherit;

}

jsfiddle演示:?https://jsfiddle.net/davidliang2008/mfqyp8j3/17/

Codepen演示:?https://codepen.io/davidliang2008/full/yLJRZYy


查看完整回答
反對 回復 2023-07-20
  • 1 回答
  • 0 關注
  • 123 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號