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

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

赞 (0)

相关推荐

  • 用javascript css实现GridView行背景色交替、鼠标划过行变色，点击行变色选中

    加上鼠标点击选择(其实只是点击后变个颜色,"选择"这个词在这里不合适),顺便把这个直接应用到GridView上,如果是其他的控件,或者直接的HTML,稍加修改也可以用上,这里仅提供一个思路.虽然GridView使用AlternatingRowStyle提供了交替行背景色的问题,但这个东西用着实在不爽,看它生成到HTML的那个table,那叫一个乱啊. 下面是代码,注释应该还算比较详细,比较适合初学者,可以把下面两个文件的代码直接复制到你的项目中直接执行.最下面有文件的下载地址,也可以直

  • javascript表格隔行变色加鼠标移入移出及点击效果的方法

    本文实例讲述了javascript表格隔行变色加鼠标移入移出及点击效果的方法.分享给大家供大家参考.具体分析如下: 表格隔行变色,也是一个提高用户体验的js效果. 效果实现: 表格奇偶行的颜色不一样.这样可以防止用户看数据时串行. 鼠标移入某行时变颜色,移出再变回来.这样可以让用户清楚的知道自己正在看哪一行. 表格点击变色.便于用户选中自己想保留的项.   说明: i%2 每个数和2取模的值,只有0和1两种,这样就可以实现隔行变色的效果 tables_li[i].onoff = 1;  为了实现

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

    废话不多说了,直接给大家贴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

  • Vue实现点击导航栏当前标签后变色功能

    本文实例为大家分享了Vue实现点击导航栏当前标签后变色的具体代码,供大家参考,具体内容如下 效果图 实现 这个功能,借助一个切换标识,当与各标签项 index 对应时切换 css. HTML: <template> <div class="nav"> <!-- 点击切换变色导航栏 --> <ul> <li v-for="(item,index) in nav" :class="{ active: ind

  • jQuery点击导航栏选中更换样式的实现代码

    jQuery点击导航栏选中更换样式的实现代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!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> <tit

  • layui点击导航栏刷新tab页的示例代码

    layui的tab也默认是切换,不会刷新,想要达到点击导航栏刷新tab的功能只需在tab.js文件中将autoRefresh: false,改为true. 以上这篇layui点击导航栏刷新tab页的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载

    基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载

    基于jQuery鼠标点击水波动画竖直导航代码.这是一款基于jQuery+CSS3实现的带动画效果的竖直导航栏特效.效果图如下: 效果展示    源码下载 html代码: <div class="nav"> <ul> <li><a>网站首页</a></li> <li><a>关于我们</a></li> <li><a>产品中心</a>&l

  • javascript实现鼠标点击页面 移动DIV

    <script type="text/javascript"> //那种方式移动 var choMove = false; //是否绑定过click var isClick = true; //引用DIV var oDiv = null; //引用Input var oInput = null; //封装事件绑定的通用对象 var evnetUtil = { addEventHandle:function(oElement,evtype,fun){ oElement.att

  • javascript实现鼠标点击生成文字特效

    javascript实现鼠标点击生成文字特效

    前端实用脚本(鼠标点击生成文字特效) 你好! 这是你第一次写 博客 目的是为了记录常用到的技术知识以供同行参考学习和方便自己以后查阅 前言 最近在浏览一些博客的时候总是能够看到,当我点击鼠标的时候鼠标位置就会出现文字然后往上方浮动.当时比较好奇,然后空闲时间就去百度了一下这种效果是怎么实现的,然后结合一些博客整理了一下. 旧版本 1.单一的浮动效果 ,旧版本的只有一种颜色,比较单调: 2.没有遵循 : 可以run的demo才是好demo的原则 新版本 1.筛选了多种好看的颜色样式 2.复制代码到

  • Javascript实现鼠标点击冒泡特效

    Javascript实现鼠标点击冒泡特效

    本文实例为大家分享了js鼠标点击冒泡的具体代码,供大家参考,具体内容如下 一个用JS写的鼠标左击特效 点击鼠标左键会出现红心"❤"或者字符表情"(๑•́ ₃ •̀๑)"- 常用Emoji 可以自行替换,如需复制,请从底部链接移步至Github 代码 onload = function() { var click_cnt = 0; var $html = document.getElementsByTagName("html")[0]; var $

  • JS实现导航栏楼层特效

    JS实现导航栏楼层特效

    本文实例为大家分享了JS实现导航栏楼层的具体代码,供大家参考,具体内容如下 知识点 1.多个事件有冲突的时候,需要设置flag判断是什么事件,进而进行后续操作. 2.楼层效果就是判断scrollTop和offsetTop的关系 3.引入工具库工具库 运行效果 导航与界面实现互动 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

  • javascript获取鼠标点击元素对象(示例代码)

    IE:var obj=document.elementFromPoint(event.clientX,event.clientY); 获取对象文本var a=obj.innerText FF里面要在事件里面添加对象才可以读取坐标. HTML:onclick="gj(event)" JS: 复制代码 代码如下: function gj(event){ var b=objobj=document.elementFromPoint(event.clientX,event.clientY);}

随机推荐