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


Posted in Javascript onFebruary 08, 2017

废话不多说了,直接给大家贴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实现鼠标点击导航栏变色特效,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
vue-cli3单页构建大型项目方案
Apr 07 Javascript
JavaScript实现简单图片切换
Apr 29 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 #Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 #Javascript
深入理解js中的加载事件
Feb 08 #Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 #Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 #Javascript
setTimeout学习小结
Feb 08 #Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 #Javascript
You might like
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
python基础教程之对象和类的实际运用
2014/08/29 Python
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
python实现ID3决策树算法
2017/12/20 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
python支付宝支付示例详解
2019/08/22 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
Django ORM filter() 的运用详解
2020/05/14 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
简历中自我评价分享
2013/10/09 职场文书
促销活动方案模板
2014/02/24 职场文书
五一活动标语
2014/06/30 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
2014年司机工作总结
2014/11/21 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
校长新学期致辞
2015/07/30 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS