`

如何让 href 失效(转)

阅读更多

 合理使用 return  false;
注意其中的原理:



<href="http://www.google.cn" onclick="return myclick();">链接到谷歌</a>

<script type="text/javascript">
   
function myclick(){
      alert('呵呵,我失效了吗?');
      
return false;
   }

</script>



当然,还可以利用链接到一个函数的方式,如下:

<href="javascript:goto();">链接失效咯。</a>


================================

<html>  
<head>  
</head>  
<body>  
<a   href="http://www.sina.com">连接</a>  
<input   type=button   value="dian">  
</body>  
</html>  

当点击button后   ,如何使上面超链接无效??  


<a   href="http://www.sina.com"   id="mylink">连接</a>  
<input   type=button   value="dian"   onclick="mylink.href='#'">  

<html>  
<head>  
</head>  
<body>  
<a   href="http://www.sina.com">连接</a>  
<input   type=button   value="dian"   onclick="mylink.href=''">  
</body>  
</html>

<html>  
<head>  
<SCRIPT   LANGUAGE="JavaScript">  
<!--  
function   test(){  
aaa.disabled=true;  
aaa.onclick=function(){return   false}  
}  
//-->  
</SCRIPT>  
</head>  
<body>  
<a   href="http://www.sina.com"   id=aaa>连接</a>  
<input   type=button   value="dian"   onclick="test()">  
</body>  
</html>

这一个比较经典,我,曾经见过!!!
<a   href="http://www.sina.com"   id="mylink">连接</a>  
<input   type=button   value="dian"   ID=Button1   onclick="document.links('mylink').outerHTML='连接';">

<a   href="http://www.sina.com"   id="mylink">连接</a>  
<input   type=button   value="dian"   ID=Button1   onclick="document.links('mylink').disabled=!document.links('mylink').disabled;">

<html>  
<head>  
<script   language="javascript">  
function   Disable(){  
var   strTxt=mylink.innerText;  
mylink.outerHTML="<font   id='mylink'   color='black'>"+strTxt+"</font>";  
}  
</script>  
</head>  
<body>  
<a   id="mylink"   href="http://www.sina.com">连接</a>  
<input   type=button   value="dian"   onclick="Disable()">  
</body>  
</html>

============================================
这是一个很经典的通过 css 来控制的:

<HTML> <HEAD>
<meta http-equiv="Content-Language" content="zh-cn">
<TITLE>建站学|www.jzxue.com|---让网页上的超链接失效,不能点击</TITLE>
<style> a {poorfish:expression(this.onclick=function kill(){return false})} </style>
</HEAD>
<BODY>
<p><a target="_blank" href="http://www.jzxue.com">建站学</a></p>
<p>
<a href="http://www.163.com">www.163.com</a>
</p>
<p>
<a href="http://www.sohu.com">www.sohu.com</a></p> <p> 
</p>
</BODY>
</HTML>

===================================
在开发中时常会遇到这样的需求:让某些描述信息(这些描述信息已经进行过安全html过滤,所以不会包含Javascript等脚本语言,但是允许正常的链接)里的链接失效,但是不要或者这些描述信息.如要以下代码块里的链接失效

<div id="desc">
<a href="http://www.9i56.cn">无聊网</a>
</div>

  只需要再后面插入下段Javascript既可<script type="text/javascript">
var elements = document.getElementById('desc').getElementsByTagName('A');
for (var i = 0, len = elements.length; i < len; ++i) {
elements[i].onclick = function(){return false;};
elements[i].href = "#";
}
var elementsArea = document.getElementById('desc').getElementsByTagName('area');
for (var i = 0, len = elementsArea.length; i < len; ++i) {
elementsArea[i].onclick = function(){return false;};
elementsArea[i].href = "#";
}
</script>

  目前只知道a和area标签可以放href属性来进行跳转,不知道大家还知道有其它的方式可以用href跳转吗?

==========================================

(奇怪,不知道客户要这个效果做什么)

 

效果:

如果点击超链接,将正常导向;

如果按住Ctrl键并点击超链接,将执行一段JS代码,并且浏览器不会导向或打开新页面

 

<!--Work in IE 6.0/7.0 and FF 3.0-->
<href="#" onclick="if(event.ctrlKey){alert('Hello World!');return false;}window.location.href='http://www.google.com'";>google</a>

 

 


作者:Lance ZhangLance Zhang's Tech Blog
出处:http://blodfox777.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。



以前点某个链接希望停留在本页面的时候,往往会用href=“#”来做、今天学会了用onclick="return false;"
因为解释器是根据link的onclick方法的返回值来判断是否继续操作的。

这样就可以进一步提高javascript的兼容性,比如写一个弹出窗口就可以这样:
<a href = "http://www.iteye.com" onclick = "window.open(......); return false;">JavaEye</a>
这样支持javascript的用户可以看到弹出窗口,不支持的可以直接链接到页面。

在实际的测试中,firefox2可以实现,ie6不行。


=============================================
一个冠冕堂皇的理由来解释为什么 onclick 返回 false 之后就可以进行使链接失效:
onclick="return fn()" 与onclick"fn()"有什么区别?好像两个都可以调用吧?    
返回到哪里了关键????
这就像一个回调函数吧.?
返回给onclick?????
回调,越来越晕了,呵呵

这就像一个回调函数吧.?
onclick 方法的之行需要 事件告诉他 执行还是不执行

因为JAVASCRIPT在事件中调用函数时用return返回值实际上是对window.event.returnvalue进行设置。

而该值决定了当前操作是否继续。
当返回的是TRUE时,将继续操作。
当返回是false时,将中断操作。

而直接执行时。将不会对window.event.returnvalue进行设置
所以会默认地继续执行操作

当在 <a href="abc.htm" onclick="return add_onclick()">open</a> 中
如果函数 add_onclick() 返回 true, 那么 页面就会打开 abc.htm
否则, (返回 false), 那么页面不会跳转到 abc.htm, 只会执行你的 add_onclick() 函数里的内容. (add_onclick函数中控制页面转到 abc.htm除外)

而 <a href="abc.htm" onclick="add_onclick()">open</a>
不管 add_onclick() 返回什么值, 都会在执行完 add_onclick 后打开页面 abc.htm



不过注意: 这个使链接失效的代码是不是版本兼容的,也不是浏览器兼容的。
IE6 可以 ,IE7 不行。。。
FireFox 据说也不行。

分享到:
评论
3 楼 wgimperial 2012-10-31  
帮我解决了问题,谢谢LZ 
2 楼 快乐向日葵 2011-04-27  
huhuanqadn 写道
终于解决了我的问题,谢谢了,兄弟。

I'm a girl
1 楼 huhuanqadn 2011-04-25  
终于解决了我的问题,谢谢了,兄弟。

相关推荐

    [removed].href IE下跳转失效的解决方法

    主要介绍了[removed].href IE下跳转失效的解决方法,需要的朋友可以参考下

    解决使用vue.js路由后失效的问题

    且之前用jquery写的一些效果也失效了.最后找到原因是因为同一个id被启动了两次(第一次是之前使用vue组件时启动的,另外一个是路由时启动的) 附上部分代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta ...

    JS的location.href跳出框架打开新页面的方法

    今天遇到个问题,后面在框架中,当判断登录失效后要返回登录页面,但登录页面却在框架内打开,我想让它直接跳出框架打开(这里不是打开新窗口),终于在网上找到了办法,分享给大家: echo “[removed]alert&#40;...

    jsp 网站引入外部css或者js失效问题解决

    最近做项目,完成项目经理布置...link rel=”stylesheet” type=”text/css” href=”css/login.css”&gt; 记得jsp头部需要设置相对路径: &lt;&#37; String path = request.getContextPath(); String basePath =

    HTML的a标签href属性指定相对路径与绝对路径的用法讲解

    在实际Web开发中,插入图片、包含CSS文件等都需要有路径,如果文件路径的添加错误,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。很多初学者感到困惑,下面我就详细的介绍一下相对路径与绝对路径。...

    最新苹果CMS海螺模版V20修复版源码 加广告代码.zip

    修复前台黑白切换和字体颜色切换失效 修复微信二维码没有对接苹果控制后台问题 优化换一换功能的图片加载速度 修复PC页面下滑空白问题 修复播放页列表不能滑动问题 修复换一换失效 分享无链接问题 修复页面...

    bootstrap日期控件问题(双日期、清空等问题解决)

    bootstrap以它优美的外观和丰富的组件,使它成为目前最流行的前端框架。在项目开发中,我们使用它的日期控件确实遇到了一些问题:  1.日期控件后面两个图标点击触发...link rel=stylesheet href=bootstrap.css rel=

    162100经典简洁网址导航 4.0.rar

    3、程序构思、构成;安装、管理无比简洁。在线音乐盒功能——源于...2、增加了导出链接形式开关(可选href、JS-onclick形式),便于提高页面SEO质量 3、增加了搜索框汉王手写输入功能 4、增加了搜索框智能联想功能

    提交按钮的name=’submit’引起的js失效问题及原因

    代码如下: 代码如下: ...link type=”text/css” rel=”stylesheet” href=”css/style.css”&gt; &lt;/head&gt; &lt;body&gt; &lt;form id=”pquery” method=”post” action=”supplierAction!list.a

    经验几则

    utf-8也符合 国际规范 CSS中:hover这个伪类,如果放在:visited前面则会失效 标签如果没有href属性,所有对它的css的伪类如:hover均失效 js文件中用document.wirte(“[removed]&lt;/” + “script&gt;”形式的 引用...

    经验几则 推荐

    utf-8也符合国际规范 CSS中:hover这个伪类,如果放在:visited前面则会失效 标签如果没有href属性,所有对它的css的伪类如:hover均失效 js文件中用document.wirte(“[removed]&lt;/” + “script&gt;”形式的引用,...

    [removed]不跳转的问题解决方法

    这时这句[removed]的跳转失效了。后来上网查了下,想起javascript里面事件是冒泡传递的事,可能是被内嵌的那个href事件给组织了。 解决办法是:在onclick方法里面增加一句return false的语句,让程序强制跳出不继续...

    bookmarks-html2markdown:将ChromeIEFirefox格式的书签列表转换为Markdown表,以简化管理和处理

    阶段1 容错盲目解析Chrome书签导出文件以查找H3以指示文件夹带有HREF属性的标签,用于将URL添加到书签。 阶段2 访问每个URL以确定它是否已失效/已弃用/已损坏。 删除无效链接,仅添加有效链接。 利用或扩展以下代码...

    微信小程序 基础知识css样式media标签

    微信小程序 基础知识css样式media标签 前言: ...在css中我们使用media标签来区分调用哪个css样式,比如使用media=”print”来...link href=styles/main.css rel=external nofollow rel=stylesheet type=text/css media=s

    aos.js动画的用法

    link rel="stylesheet" href="dist/aos.css" /&gt; [removed][removed] [removed][removed] HTML结构 要使用aos动画库,你需要做的就是在需要动画的元素上添加aos属性,例如: aos脚本将会在页面滚动时,在该元素...

    freemarker语法完整版

    Freemarker页面语法 A 概念 最常用的 3 个概念 sequence 序列,对应java 里的list 、数组等非键值对的集合 hash 键值对的集合 namespace 对一个ftl 文件的引用, 利用这个名字可以访问到该ftl 文件的资源 ...

    MAC水晶版播放器for dvbbs7.0

    播放列表现有740首歌,均为过滤后的基本无重复,失效链接. 2. 演示: http://www.hi01.com 或 http://www.hi01.com/bbs/music.htm&lt;br&gt; &lt;br&gt; 3. 安装方法: 压缩包内文件解包后,把所有文件上传至...

    js点击事件链接的问题解决

    代码如下: [removed] /*关于弹窗的链接的问题 * 2014-04-24 */1:超链接a onclick 弹窗之后如何让超链接a失效 //js解决 function arts(sourceobj){ var url = $(sourceobj).attr(“href”); art.dialog.open(url, {...

    ImageZoom:Jquery 图片墙大图模式

    link href="css/imageZoom.css" rel="stylesheet" type="text/css" /&gt;完成上述工作后,我们开始做最重要的一步,但最后一步。 $('ul li img').imageZoom({});使用 jquery 选择器选择你想要 imageZomm 的图片。...

Global site tag (gtag.js) - Google Analytics