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 相关文章推荐
syntaxhighlighter 使用方法
Jul 02 Javascript
jQuery实现的类flash菜单效果代码
May 17 Javascript
js自动查找select下拉的菜单并选择(示例代码)
Feb 26 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
Javascript实现运算符重载详解
Apr 07 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 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入门教程 精简版
2009/12/13 PHP
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
Python 基础知识之字符串处理
2017/01/06 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
浅析Python requests 模块
2020/10/09 Python
python爬虫工具例举说明
2020/11/30 Python
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
高中自我鉴定
2013/12/20 职场文书
表扬信格式
2014/01/12 职场文书
一年级班主任寄语
2014/01/19 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
2019年教师入党申请书
2019/06/27 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书