zoukankan      html  css  js  c++  java
  • js jQuery取消添加超链接的方法小结

    今天在工作中需要将某个链接给取消实现只触发事件的目的,后来发现批量取消链接等,脚本之家简单的给整理了下,希望对需要的朋友有所帮助。

    单个链接取消链接并触发js事件

    <a href="javascript:void(0);" onclick="alert('ok')">测试</a> 

    批量将网页中的链接取消或重新设置链接的代码:

     1  
     2 <A href="http://www.baidu.com" >百度</A>    <A href="http://www.jb51.net" >脚本之家</A> 
     3 <A href="http://s.jb51.net" >服务器软件</A>    <A href="http://sc.jb51.net" > 素材下载</A> 
     4 <A href="http://tools.jb51.net" >站长查询</A>    <A href="http://www.jb51.net/jiaoben/" >脚本下载</A> 
     5 <input type=button id=o1 value="取消所有链接" onclick="javascript:doLinkAll(false)"> 
     6 <input type=button id=o2 value="重新设置链接" onclick="javascript:doLinkAll(true)"> 
     7 <script> 
     8 function doLinkAll(action){ 
     9 var arr=document.getElementsByTagName("A") 
    10 for(var i=0;i <arr.length;i++){ 
    11 if (action){ //重新设置链接 
    12 if (arr[i].rel) arr[i].setAttribute("href",arr[i].rel) 
    13 }else{ //取消所有链接 
    14 arr[i].setAttribute("rel",arr[i].href) 
    15 arr[i].removeAttribute("href") 
    16 } 
    17 } 
    18 o1.disabled=!action 
    19 o2.disabled=action 
    20 } 
    21 </script> 

    如果想让指定id的链接字取消或恢复链接可以参考下面的代码

    1 var e=document.getElementById( "link1 ")
    2 //设置
    3 e.setAttribute( "href ",e.rel)
    4 //取消
    5 e.setAttribute( "rel ",e.href)
    6 e.removeAttribute( "href ") 

    代码说明:为什么取消需要加上e.setAttribute( "rel ",e.href) ,这段代码就是为a增加一个rel熟悉并设置好链接,方便后来的恢复链接。

    js方法原文来自:http://www.jb51.net/article/28500.htm

    jQuery方法:

    取消链接:

    jQuery代码:

    1 <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
    2 
    3 <script type="text/javascript">
    4 $(document).ready(function() {
    5     $(".cont a").removeAttr("href")
    6 });
    7 
    8 </script> 

     html代码:

    1 <div class="cont">
    2 <a href="http://www.baidu.com">内容</a>
    3 
    4 </div>

    添加链接实现:

    jQuery代码:

     1 <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
     2 
     3 <script type="text/javascript">
     4 $(document).ready(function() {
     5     
     6       var strA = "<a href='http://www.baidu.com'></a>";  
     7       $(".cont").wrapInner(strA);  
     8     
     9     
    10     
    11 });
    12 
    13 </script> 

    html代码:

    1 <div class="cont">
    2 内容
    3 
    4 </div>
  • 相关阅读:
    设计模式之单例模式
    EditText的光标在4.0中的bug
    省赛热身赛之Median
    VB6获取本机所有IP地址公用函数
    省赛热身赛之Kagome Kagome
    OpenCV学习笔记(30)KAZE 算法原理与源码分析(四)KAZE特征的性能分析与比较
    使用jQuery validate 验证注册表单
    Oracle 发布 GlassFish 路线图
    Oracle 发布 GlassFish 路线图
    Java 中的双重检查(DoubleCheck)
  • 原文地址:https://www.cnblogs.com/webqiand/p/4344846.html
Copyright © 2011-2022 走看看