有時(shí)候需要做選中的效果,比如選項(xiàng)卡切換,多個(gè)不同的文本和圖片切換,往往需要用到j(luò)s,今天給大家介紹一下另一種利用i來切換簡單圖片的方法,只需要用到css,那么我們看一下怎么搞吧。
大家請看,如上圖使我們設(shè)計(jì)圖的效果被選中的改變圖標(biāo)和文字的顏色,并添加底部邊框,這里我們正常使用js切換內(nèi)容,給他們添加點(diǎn)擊事件,通過改變數(shù)字來判斷是否選中,并給選中的添加一個(gè)claas為on的類名。
下面就到了騷操作的時(shí)候了,正常我們使用img都需要src然后引入路徑,這里我們可以在i中引入路徑,直接改變i的內(nèi)容,當(dāng)tab選項(xiàng)被選中時(shí),也就是他的父級被賦予了on這個(gè)類名,然后我們通過.on i{}來覆蓋原本i中的路徑達(dá)到切換的效果。
大家就可以看到切換效果了,與img的切換是一樣的。
關(guān)鍵詞: