久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

15
2023/09

另一種圖片切換-利用i實(shí)現(xiàn)簡單切換

發(fā)布時(shí)間:2023-09-15 18:37:22
發(fā)布者:·
瀏覽量:
0

  有時(shí)候需要做選中的效果,比如選項(xiàng)卡切換,多個(gè)不同的文本和圖片切換,往往需要用到j(luò)s,今天給大家介紹一下另一種利用i來切換簡單圖片的方法,只需要用到css,那么我們看一下怎么搞吧。

 另一種圖片切換-利用i實(shí)現(xiàn)簡單切換

另一種圖片切換-利用i實(shí)現(xiàn)簡單切換

 

  大家請看,如上圖使我們設(shè)計(jì)圖的效果被選中的改變圖標(biāo)和文字的顏色,并添加底部邊框,這里我們正常使用js切換內(nèi)容,給他們添加點(diǎn)擊事件,通過改變數(shù)字來判斷是否選中,并給選中的添加一個(gè)claas為on的類名。

 另一種圖片切換-利用i實(shí)現(xiàn)簡單切換

  下面就到了騷操作的時(shí)候了,正常我們使用img都需要src然后引入路徑,這里我們可以在i中引入路徑,直接改變i的內(nèi)容,當(dāng)tab選項(xiàng)被選中時(shí),也就是他的父級被賦予了on這個(gè)類名,然后我們通過.on i{}來覆蓋原本i中的路徑達(dá)到切換的效果。

 另一種圖片切換-利用i實(shí)現(xiàn)簡單切換

  大家就可以看到切換效果了,與img的切換是一樣的。

另一種圖片切換-利用i實(shí)現(xiàn)簡單切換

 


返回列表