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实现鼠标点击导航栏变色特效，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家介绍了实现jquery手风琴效果的详细代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要为大家详细介绍了原生JavaScript实现轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
微信小程序wx.navigateTo中events属性实现页面间通信传值，数据同步
这篇文章主要介绍了微信小程序wx.navigateTo中events属性实现页面间通信传值，数据同步,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
这篇文章主要为大家详细介绍了js制作简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了JavaScript 下载svg图片为png格式,本文通过代码给大家讲解的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
我们测试了谷歌爬虫是如何抓取 JavaScript，下面就是我们从中学习到的知识,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了Javascript的JSBridge，对JSBridge感兴趣的同学，可以参考下2021-04-04
扁平化，顾名思义就是减少复杂性装饰，使其事物本身更简洁、简单，突出主题。数组扁平化，对着上面意思套也知道了，就是将一个复杂的嵌套多层的数组，一层一层的转化为层级较少或者只有一层的数组2022-10-10
UniApp使用vue.config.js进行配置的详细教程
这篇文章主要给大家介绍了关于UniApp使用vue.config.js进行配置的详细教程,uniapp是一套基于Vue语法的框架,同样也支持Vue.config.js配置,一般常用的莫过于路径的名称,需要的朋友可以参考下2023-10-10
图片的上传预览功能主要用于图片上传前的一个效果的预览，这篇文章主要介绍了Javascript图片上传前的本地预览实例,需要的朋友可以参考下2014-06-06
最新评论