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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 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学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
解析Python编程中的包结构
2015/10/25 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
Python collections模块的使用方法
2020/10/09 Python
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
大学生创业计划书的范文
2014/01/07 职场文书
工厂实习感言
2014/01/14 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
护士求职自荐信范文
2014/03/19 职场文书
教师节感谢信
2015/01/22 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
休假证明书
2015/06/24 职场文书
消防演习感想
2015/08/10 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
MySQL GTID复制的具体使用
2022/05/20 MySQL