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 表单规则集合对象
Jul 21 Javascript
javascript与CSS复习(《精通javascript》)
Jun 29 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 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
一个odbc连mssql分页的类
2006/10/09 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
JS中数据结构之栈
2019/01/01 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
跟老齐学Python之再深点,更懂list
2014/09/20 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
毕业生就业自荐书
2013/12/15 职场文书
单位单身证明范本
2014/01/11 职场文书
实习鉴定评语
2014/01/19 职场文书
保密工作责任书
2014/04/16 职场文书
跳槽求职信范文
2014/05/26 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
惊天动地观后感
2015/06/10 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers