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 相关文章推荐
JavaScript去除空格的几种方法
Oct 03 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
vue 计时器组件的实现代码
Sep 14 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
基于Fixed定位的框选功能的实现代码
May 13 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 防止单引号,双引号在接受页面转义
2008/07/10 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
很酷的javascript loading效果代码
2008/06/18 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
Python中list查询及所需时间计算操作示例
2018/06/21 Python
Python中反射和描述器总结
2018/09/23 Python
Python闭包思想与用法浅析
2018/12/27 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
深入分析python 排序
2020/08/24 Python
写给爸爸的道歉信
2014/01/15 职场文书
捐书寄语赠言
2014/01/18 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
《悯农》教学反思
2014/04/28 职场文书
2014年减负工作总结
2014/12/10 职场文书
西岭雪山导游词
2015/02/06 职场文书
消费者理赔投诉书
2015/07/02 职场文书
会议主持词结束语
2015/07/03 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
vue实现简易音乐播放器
2022/08/14 Vue.js