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 05 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
js数组去重的hash方法
Dec 22 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
js制作提示框插件
Dec 24 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 xml文件操作代码(一)
2009/03/20 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
php多进程应用场景实例详解
2019/07/22 PHP
jquery中.add()的使用分析
2013/04/26 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
简单使用Python自动生成文章
2014/12/25 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
Python 忽略warning的输出方法
2018/10/18 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
python实现批处理文件
2020/07/28 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
活动总结新闻稿
2014/08/30 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB