当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript实现鼠标点击导航栏变色特效

JavaScript实现鼠标点击导航栏变色特效

2019年03月26日  | 移动技术网IT编程  | 我要评论

废话不多说了，直接给大家贴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实现鼠标点击导航栏变色特效，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网