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 相关文章推荐
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
vue实现tab栏点击高亮效果
Aug 19 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
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
Banner程序
2006/10/09 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
python中不能连接超时的问题及解决方法
2018/06/10 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
财务管理专业推荐信
2013/11/19 职场文书
高三语文教学反思
2014/01/15 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
2015年仓库工作总结
2015/04/09 职场文书
预备党员考察意见范文
2015/06/01 职场文书
利用python做表格数据处理
2021/04/13 Python
python 实现德洛内三角剖分的操作
2021/04/22 Python