编程 Javascript

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程序设计有所帮助。

- Author -

永远爱好写程序

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery技巧大放送学习jquery的朋友可以看下

Oct 14 Javascript

js实时监听文本框状态的方法

Apr 26 Javascript

Javascript中找到子元素在父元素内相对位置的代码

Jul 21 Javascript

javascript返回顶部效果(自写代码)

Jan 06 Javascript

jQuery()方法的第二个参数详解

Apr 29 Javascript

学习JavaScript设计模式之迭代器模式

Jan 19 Javascript

JavaScript实现点击文本自动定位到下拉框选中操作

Jun 15 Javascript

JavaScript基础重点(必看)

Jul 09 Javascript

浅谈时钟的生成(js手写简洁代码)

Aug 20 Javascript

详解AngularJs路由之Ui-router-resolve（预加载）

Jun 13 Javascript

微信小程序授权登陆及每次检查是否授权实例代码

Sep 18 Javascript

解决vuex刷新数据消失问题

Nov 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