主页 / 网络编程 /

javascript实现链接单选效果的方法

网络编程 2021-07-04 21:48www.168986.cn编程入门
这篇文章主要介绍了javascript实现链接单选效果的方法,可实现点击链接改变其背景色的功能,可禁用对应链接的跳转,需要的朋友可以参考下

本文实例讲述了javascript实现链接单选效果的方法。分享给大家供大家参考。具体实现方法如下

<html xmlns="http://.w3./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://.baidu.">百度</a><br />
<a href="http://.sohu.">搜狐</a><br />
<a href="https://.jb51.">狼蚁SEO</a><br />
<a href="http://.tudou.">土豆</a><br />
<a href="http://.csdn.">CSDN</a><br />
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：javascript鼠标滑动评分控件完整实例 下一篇：javascript实现table选中的行以指定颜色高亮显示的

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by