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

最新推荐文章于 2022-04-06 17:51:35 发布

相思比梦长

最新推荐文章于 2022-04-06 17:51:35 发布

阅读量7k

点赞数 3

分类专栏： WEB前端文章标签： JAVASCRIPT 导航栏鼠标点击变色特效

本文链接：https://blog.csdn.net/netuser1937/article/details/54922682

版权

WEB前端专栏收录该内容

114 篇文章 2 订阅

订阅专栏

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