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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

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

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

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

1 回答

?
翻翻過(guò)去那場(chǎng)雪

TA貢獻(xiàn)2065條經(jīng)驗(yàn) 獲得超14個(gè)贊

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

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

.active當(dāng)選擇/取消選擇按鈕時(shí),這會(huì)自動(dòng)切換類。

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


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

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

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

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

當(dāng)您單擊其他位置時(shí),只會(huì).focus刪除類。這就是為什么您應(yīng)該看到按鈕充滿了背景顏色,沒(méi)有陰影,就像您將鼠標(biāo)懸停在按鈕上一樣。

當(dāng)您取消選擇一個(gè)按鈕但鼠標(biāo)仍然指向它時(shí),.active類將被刪除,但懸停效果仍然.focus繼續(xù),使按鈕看起來(lái)就像您沒(méi)有取消選擇它一樣。

一旦鼠標(biāo)移開(kāi),懸停效果就會(huì)消失,只剩.focus下懸停效果。這就是為什么您應(yīng)該看到按鈕只有陰影。


如果你想進(jìn)一步區(qū)分按鈕的選擇和取消選擇狀態(tài),你可以編寫CSS來(lái)禁用懸停效果,如果按鈕是但.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


查看完整回答
反對(duì) 回復(fù) 2023-07-20
  • 1 回答
  • 0 關(guān)注
  • 137 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)