脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 导航栏点击后变色

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

 更新时间：2017年02月08日 09:42:17   作者：孫瑞  
本文给大家分享一段基于js代码实现的鼠标点击导航栏变色效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下

废话不多说了，直接给大家贴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中的forEach、$.each、map方法推荐

    JS中的forEach、$.each、map方法推荐

    下面小编就为大家带来一篇JS中的forEach、$.each、map方法推荐。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-04-04
  • javascript 面向对象封装与继承

    javascript 面向对象封装与继承

    本文是对自己这么长时间以来学习javascript面向对象的总结，这里针对封装和继承结合实例进行了详细分析，给有相同需求的小伙伴们参考下吧。
    2014-11-11
  • Javascript将JSON日期格式化

    Javascript将JSON日期格式化

    在做项目中，将实体转化为JSON后，结果后台返回json时间格式为/Date(1306418993027)/，在前台JS里显示的并不是真正的日期，而且我们不能把所有日期字段都变成string吧，因此写了Javascript的扩展方法，来实现这个功能，代码如下
    2016-08-08
  • js指定日期增加指定月份的实现方法

    js指定日期增加指定月份的实现方法

    这篇文章主要给大家介绍了关于js指定日期增加指定月份的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2018-12-12
  • 微信小程序中slot插槽基本使用方法实例

    微信小程序中slot插槽基本使用方法实例

    之前竟然听到有人跟我说微信小程序没有组件插槽功能,下面这篇文章主要给大家介绍了关于微信小程序中slot插槽基本使用方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • JavaScript基于libgif.js实现控制gif动画帧

    JavaScript基于libgif.js实现控制gif动画帧

    这篇文章主要为大家详细介绍了JavaScript如何利用libgif.js插件控制gif动画帧,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02
  • window.location.hash 属性使用说明

    window.location.hash 属性使用说明

    location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。
    2010-03-03
  • Javascript调试脚本的经验之谈

    Javascript调试脚本的经验之谈

    随着用JavaScript编程的深入，你会开始理解那些JavaScript给出的不透明错误信息。一旦你理解了你常犯的一般性错误，你就会很快知道怎样避免它们，这样你写的代码中的错误将越来越少。
    2008-10-10
  • 微信小程序实现吸顶特效

    微信小程序实现吸顶特效

    这篇文章主要为大家详细介绍了微信小程序实现吸顶特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • javascript设计模式之迭代器模式

    javascript设计模式之迭代器模式

    这篇文章主要为大家详细介绍了javascript设计模式之迭代器模式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01

最新评论