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

本文实例讲述了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="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>

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

赞 (0)

相关推荐

  • javascript动态创建链接的方法

    本文实例讲述了javascript动态创建链接的方法.分享给大家供大家参考.具体分析如下: 动态创建链接示例: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态添加链接</title&

  • JavaScript实现点击单选按钮改变输入框中文本域内容的方法

    JavaScript实现点击单选按钮改变输入框中文本域内容的方法

    本文实例讲述了JavaScript实现点击单选按钮改变输入框中文本域内容的方法.分享给大家供大家参考.具体如下: 这里实现点击单选按钮改变输入框中文本域内容的方法,是一个JavaScript 的简单应用,可以减少用户的输入,提升用户操作易用性,它类似一个TAB选项卡一样的功能,并可以完成后提交表单,值得学习. 运行效果截图如下: 具体代码如下: <html> <head> <title>JavaScript点击单选框改变输入框内容</title> </

  • javascript 单选按钮 单击选中 双击取消选择实现代码

    单选按钮,双击取消选中 window.onload = function() { // setRadio("myDiv", "form1", "alreadySelected"); var radios = document.getElementsByTagName("input"); for (var i = 0; i A: B: C: D: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JavaScript获取网页中第一个链接ID的方法

    本文实例讲述了JavaScript获取网页中第一个链接ID的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过document.links获得网页中的所有超级链接数组,然后获得第一个链接的ID属性 <!DOCTYPE html> <html> <body> <h1>sharejs.com</h1> <img src ="planets.gif" width="145" height="

  • javascript处理a标签超链接默认事件的方法

    本文实例讲述了javascript处理a标签超链接默认事件的方法.分享给大家供大家参考.具体分析如下: 有时需要在a标签上添加click事件,并且跳转前处理一些事务,故需要做一些处理:通常前端会给出一个<a href="#">link</a>来代表这个行为,有些还会这样写<a href="###">link</a>或者<a href="javascript:void(0);">link&

  • JavaScript判断一个URL链接是否有效的实现方法

    引言 有一个通讯录系统, 同时部署在几台服务器上, 但是主页上有个通讯录的链接, 链接到这个系统. 问题是, 有时候链接指向的服务器出故障, 于是希望在这个服务器出故障(服务不可用)的情况下, 能指向其他服务器的链接. 解决方案一: XMLHTTP方案 以下代码摘自[2]中meizz的回帖: 复制代码 代码如下: <script language= "javascript"> function getURL(url) { var xmlhttp = new ActiveXO

  • javascript实现点击单选按钮链接转向对应网址的方法

    javascript实现点击单选按钮链接转向对应网址的方法

    本文实例讲述了javascript实现点击单选按钮链接转向对应网址的方法.分享给大家供大家参考.具体如下: 这里实现一个按钮特效,当点击复选择框按钮的时候,激活链接,跳转到某网址,这里主要是由onClick派生出来的一些功能,然后配合函数你可以编写出更多的按钮特效来. 运行效果截图如下: 具体代码如下: <html> <head> <title>点击文本框激活链接转向某网址</title> <SCRIPT> function go(loc) {

  • javascript实现类似超链接的效果

    实现类似超链接的效果,this代表本页面元素 复制代码 代码如下: <html> <head> <script type="text/javascript"> function mOver(obj){     obj.color="red"; } function mOut(obj){     obj.color="blue"; } </script> </head> <body&

  • JavaScript返回网页中超链接数量的方法

    本文实例讲述了JavaScript返回网页中超链接数量的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过document.links获取网页中的所有超级链接,从而获得超链接的数量 <!DOCTYPE html> <html> <body> <img src ="planets.gif" width="145" height="126" alt="Planets" usemap

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

    本文实例讲述了javascript实现链接单选效果的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>链接单选</title> <

  • jQuery实现行文字链接提示效果的方法

    本文实例讲述了jQuery实现行文字链接提示效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht

  • Javascript 获取链接(url)参数的方法[正则与截取字符串]

    当然,我们也可以用正则直接匹配,文章中也给出了一个正则的例子. 分解链接的方式: 复制代码 代码如下: <script type="text/javascript"> <!-- // 说明:Javascript 获取链接(url)参数的方法 function getQueryString(name) { // 如果链接没有参数,或者链接中不存在我们要获取的参数,直接返回空 if(location.href.indexOf("?")==-1 || l

  • Javascript实现飞动广告效果的方法

    本文实例讲述了Javascript实现飞动广告效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

  • JavaScript实现滚动栏效果的方法

    本文实例讲述了JavaScript实现滚动栏效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } #div1 ul{ position: absolute; le

  • JavaScript实现彩虹文字效果的方法

    本文实例讲述了JavaScript实现彩虹文字效果的方法.分享给大家供大家参考.具体如下: <HTML> <HEAD> <TITLE>Rainbow Text</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin hide from old browsers function createHexArray(n) { this.length = n; for (var i =

  • javascript实现下班倒计时效果的方法(可桌面通知)

    javascript实现下班倒计时效果的方法(可桌面通知)

    本文实例讲述了javascript实现下班倒计时效果的方法.分享给大家供大家参考.具体如下: 周末了,搞个下班倒计时,娱乐下. 确保下面三点: 1.非IE浏览器,较高Chrome版本,已开启HTML5桌面通知.具体设置见下面截图 2.将这个HTML放到本地Web服务器上测试,直接双击运行无法弹出桌面通知 顺带提下,这个程序很容易扩展成定时通知. 做这个东西的过程有两点比较纠结,总结下: 1.parseInt("09")返回的是0.正确做法是parseInt("09"

  • Javascript 获取链接(url)参数的方法

    方法1:将链接当作字符串 ,按照链接的格式分解,然后获取对应的参数值. 方法2:用正则直接匹配. 关键字:parameter 参数:location.href,url ,链接,javascript 方法1: 分解链接方式: 复制代码 代码如下: <script type="text/javascript"> function getQueryString(name) { // 如果链接没有参数,或者链接中不存在我们要获取的参数,直接返回空 if(location.href.

  • 最精简的JavaScript实现鼠标拖动效果的方法

    相对于其它的鼠标拖动效果,这款拖动特效还是比较精简的,而且它还支持鼠标吸附,不按鼠标左键它也可以会跟随鼠标移动:定义时候也相对方便,只用指定被拖动的DIV ID就可以了,扩展性很好. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=

  • JavaScript实现文字与图片拖拽效果的方法

    本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JavaScript实现文字与图片的拖拽效果</title> <style type="text/css"> *{padding:0;margin:0;} .tips{position:absolute;background:#eee;} </style

随机推荐