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 相关文章推荐
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Sep 22 Javascript
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
javascript中var的重要性分析
Feb 11 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 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
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
jQuery中的常用事件总结
2009/12/27 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
angularJS 入门基础
2015/02/09 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
python实现烟花小程序
2019/01/30 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
python基础教程之while循环
2019/08/14 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
个人找工作的自我评价
2013/10/17 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
2014年大学生自我评价
2014/01/19 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
2014年信用社工作总结
2014/11/25 职场文书