在開發手機端網頁時,我們經常需要對按鈕進行點擊事件的處理,但是有些情況下,點擊按鈕后出現的效果無法保持狀態。這時候就需要使用CSS來解決這個問題。
button:active { background-color: #ccc; }
上述代碼表示,在按鈕被按下的瞬間,按鈕的背景色會變成灰色,當松開按鈕時,背景色恢復為默認(即未被點擊)的顏色。
需要注意的是,:active偽類只在按鈕點擊的瞬間生效,松手后就不再起作用了。如果需要讓按鈕一直保持點擊狀態,需要使用JavaScript來實現,例如:
$("button").click(function() { $(this).toggleClass("active"); });
這段代碼的意思是,當按鈕被點擊后,切換一個名為“active”的類,再次點擊時取消這個類。
事實上,通過CSS和JavaScript結合使用,我們可以實現各種有趣的交互效果,為網頁增色不少。
下一篇css手機端重置