网络编程

JavaScript实现鼠标点击导航栏变色特效
网络编程 2025/10/27 佚名
3 2

废话不多说了，直接给大家贴js实现鼠标点击导航栏变色代码，具体代码如下所示：

<!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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="myset">首页</a> 
    </li> 
    <li> 
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="myset">联系我们</a> 
    </li> 
    <li> 
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="myset">帮助</a> 
    </li> 
  </ul> 
</body> 
</html>

以上所述是小编给大家介绍的JavaScript实现鼠标点击导航栏变色特效，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

标签：
js,导航栏点击后变色
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

评论“JavaScript实现鼠标点击导航栏变色特效”

暂无“JavaScript实现鼠标点击导航栏变色特效”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com