使用checkbox控制其后的元素
checkbox控件可以根據鼠標的點擊來切換其狀態,而且CSS中可以使用:checked偽類來針對選中狀態的checkbox設置樣式。再配合上CSS中的“+”或“~”選擇器,就可以從checkbox的操作來控制它之后的元素了。甚至再配合上LABEL標簽可以實現更多效果。
運行
CSS Code復制內容到剪貼板
這個例子中,文本框默認是隱藏的,只有當勾選checkbox時,其后的文本框才會顯示。這樣就可以實現無JavaScript的切換效果了。
也許有人會覺得放個checkbox在頁面上太礙眼了。其實,即使checkbox自身處于隱藏狀態,CSS中對:checked的判斷也依然生效。那么我們可以隱藏掉這個checkbox,讓LABEL標簽為其設置響應區域。
運行
CSS Code復制內容到剪貼板
但這樣的做法還是有點局限性的,因為目前的CSS不支持:has、:parent之類的東西,所以支持的操作僅局限在LABEL中,而LABEL的默認行為總是會影響其內部第一個控件,上面的代碼即使彈出了文本框,在點擊文本框時候同樣有可能觸發LABEL的默認動作,導致文本框隱藏。
總之,這里只是提供了這樣的方法,至于要用在何處要怎么用就靠大家自己研究了。
新聞熱點
疑難解答