JAVASCRIPT之导航栏鼠标点击变色特效

2024-04-27 15:13:04

字体：大中小

来源：转载

供稿：网友

<!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>

上一篇：JAVASCRIPT之子窗口与父窗口的互调

下一篇：CSS3属性之：border-radius