javascript实现链接单选效果的方法


Posted in Javascript onMay 13, 2015

本文实例讲述了javascript实现链接单选效果的方法。分享给大家供大家参考。具体实现方法如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链接单选</title>
<script type="text/javascript">
function IniEvent() {
  var links = document.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++) {
 links[i].onclick = LinkOnClick;
  }
}
function LinkOnClick() {
  var links = document.getElementsByTagName("a");
  //links在两个地方用到了(IniEvent也用到了),
  //注意,不要把links放到全局变量中,
  //尽量不要用全局变量,
  //如果重复性代码太多,将代码放到一个公共函数中
  for (var i = 0; i < links.length; i++) {
 if (links[i] == this) {
   links[i].style.background = "red";
 }
 else {
   links[i].style.background = "white";
 }
  }      
  window.event.returnValue = false;//防止导航到网站
}
</script>
</head>
<body onload="IniEvent()">
<a href="http://www.baidu.com">百度</a><br />
<a href="http://www.sohu.com">搜狐</a><br />
<a href="https://3water.com">三水点靠木</a><br />
<a href="http://www.tudou.com">土豆</a><br />
<a href="http://www.csdn.com">CSDN</a><br />
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
javascript倒计时效果实现
Nov 12 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 #Javascript
javascript实现table表格隔行变色的方法
May 13 #Javascript
javascript模拟评分控件实现方法
May 13 #Javascript
javascript动态设置样式style实例分析
May 13 #Javascript
javascript事件冒泡实例分析
May 13 #Javascript
javascript无刷新评论实现方法
May 13 #Javascript
javascript动态创建表格及添加数据实例详解
May 13 #Javascript
You might like
在线竞拍系统的PHP实现框架(二)
2006/10/09 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
css图片自适应大小
2007/11/28 Javascript
jquery创建div 实现代码
2009/04/27 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
python爬虫添加请求头代码实例
2019/12/28 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
优秀学生党员先进事迹材料
2014/05/29 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
2014年变电站工作总结
2014/12/19 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
付款证明模板
2015/06/19 职场文书
监护人证明
2015/06/19 职场文书
申请吧主发表的感言
2015/08/03 职场文书
2016大学军训心得体会
2016/01/11 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python