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 相关文章推荐
javascript for循环设法提高性能
Feb 24 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
微信小程序实现watch监听
Jun 04 Javascript
jQuery实现评论模块
Aug 19 jQuery
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脚本的10个技巧(2)
2006/10/09 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
Symfony的安装和配置方法
2016/03/17 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
Python装饰器使用示例及实际应用例子
2015/03/06 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
会计毕业生自我鉴定
2013/11/04 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
四风存在的原因分析
2014/02/11 职场文书
中学生运动会入场词
2014/02/12 职场文书
婚姻出轨保证书
2015/05/08 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
律师催款函范文
2015/06/24 职场文书
电视新闻稿
2015/07/17 职场文书
禁毒主题班会教案
2015/08/14 职场文书
Java 在生活中的 10 大应用
2021/11/02 Java/Android