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 相关文章推荐
js复制到剪切板的实例方法
Jun 28 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
js单例模式详解实例
Nov 21 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
vue-cli3单页构建大型项目方案
Apr 07 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中使用redis
2013/11/04 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
Python函数嵌套实例
2014/09/23 Python
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
go语言计算两个时间的时间差方法
2015/03/13 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
python多任务及返回值的处理方法
2019/01/22 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
Python 转换文本编码实现解析
2019/08/27 Python
Python Celery多队列配置代码实例
2019/11/22 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
python属于哪种语言
2020/08/16 Python
pytorch简介
2020/11/11 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
幼教简历自我评价
2014/01/28 职场文书
马智宇结婚主持词
2014/04/01 职场文书
成绩单公证书
2014/04/10 职场文书
投标保密承诺书
2014/05/19 职场文书
加强作风建设演讲稿
2014/10/24 职场文书