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 相关文章推荐
js添加table的行和列 具体实现方法
Jul 22 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
Js的Array数组对象详解
Feb 22 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 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
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
ES6中异步对象Promise用法详解
2019/07/31 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
逻辑链路控制协议
2016/10/01 面试题
关于祖国的演讲稿
2014/05/04 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
英语导游词
2015/02/13 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android