<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>javaSCRipT之導航欄鼠標點擊變色特效</title><style type="text/CSS">body { font-size:12px; font-family: Arial, Helvetica, sans-serif;} .ts_seled { color: #F00;} .ts_sel { color:#666;}</style><script language="Javascript">window.onload = initLinkStyle;function initLinkStyle() { if(document.getElementsByName('myset')){ var arrLink = document.getElementsByName('myset'); for(i = 0; i < arrLink.length; i++) { var link = arrLink[i]; link.className='ts_sel'; link.onclick = clickNav; } }} /** * 執行點擊事件 * @param {Object} event 鼠標事件 */function clickNav(event) { var target = event.currentTarget; //上次選擇的a的樣式 if(document.getElementsByName('myset')){ var arrLink = document.getElementsByName('myset'); for(i = 0; i < arrLink.length; i++) { var link = arrLink[i]; if(link.className == 'ts_seled') { link.className = 'ts_sel'; } } } target.className = 'ts_seled'; return false;//阻止瀏覽器默認事件}</script></head><body> <ul> <li> <a href="#" name="myset">首頁</a> </li> <li> <a href="#" name="myset">聯系我們</a> </li> <li> <a href="#" name="myset">幫助</a> </li> </ul></body></html>
新聞熱點
疑難解答
