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中的null和undefined区别介绍
Jan 01 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 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
实用函数2
2007/11/08 PHP
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
js脚本实现数据去重
2014/11/27 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
Python中的index()方法使用教程
2015/05/18 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
社区健康教育实施方案
2014/03/18 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
运动员获奖感言
2014/08/15 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers