search

Home >Web Front-end >JS Tutorial >Javascript method to achieve link radio selection effect_javascript skills

Javascript method to achieve link radio selection effect_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:59:251344browse

The example in this article describes the method of using JavaScript to achieve the link radio selection effect. Share it with everyone for your reference. The specific implementation method is as follows: 

<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="http://www.jb51.net">脚本之家</a><br />
<a href="http://www.tudou.com">土豆</a><br />
<a href="http://www.csdn.com">CSDN</a><br />
</body>
</html>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：A brief discussion on closures in javascript_javascript skillsNext article：A brief discussion on closures in javascript_javascript skills

Related articles

See more