使用checkbox控制其后的元素
checkbox控件可以根據(jù)鼠標(biāo)的點擊來切換其狀態(tài)，而且CSS中可以使用:checked偽類來針對選中狀態(tài)的checkbox設(shè)置樣式。再配合上CSS中的“+”或“～”選擇器，就可以從checkbox的操作來控制它之后的元素了。甚至再配合上LABEL標(biāo)簽可以實現(xiàn)更多效果。
運行
CSS Code復(fù)制內(nèi)容到剪貼板
<!DOCTYPE html> <style> [type=checkbox]+* {display:none;} [type=checkbox]:checked+* {display:inline-block;} </style> <input type="checkbox" /><input />這個例子中，文本框默認(rèn)是隱藏的，只有當(dāng)勾選checkbox時，其后的文本框才會顯示。這樣就可以實現(xiàn)無JavaScript的切換效果了。
也許有人會覺得放個checkbox在頁面上太礙眼了。其實，即使checkbox自身處于隱藏狀態(tài)，CSS中對:checked的判斷也依然生效。那么我們可以隱藏掉這個checkbox，讓LABEL標(biāo)簽為其設(shè)置響應(yīng)區(qū)域。
運行
CSS Code復(fù)制內(nèi)容到剪貼板
<!DOCTYPE html> <style> body {font:14px/1.5 微軟雅黑;} [type=checkbox] {display:none;} [type=checkbox]~input {display:none;} [type=checkbox]:checked~input {display:inline-block;} [type=checkbox]~span {cursor:pointer;margin-right:10px;} [type=checkbox]~span:before {content:'點我顯示文本框';} [type=checkbox]~span:hover {color:#C30;} [type=checkbox]:checked~span:before {content:'點我隱藏文本框';} </style> <label><input type="checkbox" /><span></span><input /></label>但這樣的做法還是有點局限性的，因為目前的CSS不支持:has、:parent之類的東西，所以支持的操作僅局限在LABEL中，而LABEL的默認(rèn)行為總是會影響其內(nèi)部第一個控件，上面的代碼即使彈出了文本框，在點擊文本框時候同樣有可能觸發(fā)LABEL的默認(rèn)動作，導(dǎo)致文本框隱藏。
總之，這里只是提供了這樣的方法，至于要用在何處要怎么用就靠大家自己研究了。
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
新聞熱點
疑難解答
