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 效率组装字符串 StringBuffer
Dec 23 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
jQuery 表格工具集
Apr 25 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
js实现索引图片切换效果
Nov 21 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
js实现翻牌小游戏
Jul 31 Javascript
二维码条形码生成的JavaScript脚本库
Jul 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
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
Node.js实现数据推送
2016/04/14 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
js实现数字滚动特效
2019/12/16 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
python类参数self使用示例
2014/02/17 Python
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
详细解读Python中的__init__()方法
2015/05/02 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
Python中print和return的作用及区别解析
2019/05/05 Python
Python生成器generator原理及用法解析
2020/07/20 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
香港礼品网站:GiftU eshop
2017/09/01 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
关于旷工的检讨书
2014/02/02 职场文书
房产委托公证书样本
2014/04/04 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python