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 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
javascript 可以拖动的DIV(二)
Jun 26 Javascript
用cssText批量修改样式
Aug 29 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 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
php网站被挂木马后的修复方法总结
2014/11/06 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
php创建类并调用的实例方法
2019/09/25 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
webpack4 optimization使用总结
2019/11/10 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
Python函数中的可变长参数详解
2019/09/12 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
加工操作管理制度
2014/01/19 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
国防教育标语
2014/10/08 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL