zoukankan      html  css  js  c++  java
  • JQuery 选择某个td中第二个a标签 控制特殊样式

    a标签没有disabled属性,那么当我们想禁用a标签的点击事件的时候按照下面方法设置。

    下面是html代码:

    <a id="entry”  class="entry">进入</a>

    js代码如下:

    $(“#entry”).attr("disabled",true);
    $("#entry").css("pointer-events","none");


    这样就可以将a标签设成不可点击状态了。不过虽然是不可点击状态,但a标签任然是蓝色,所以要人为的给他添加上灰色字体。


    下面讲讲 pointer-events 属性:

    值为auto的时候:效果和没有定义pointer-events属性相同;鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。

    值为none的时候:元素不在是鼠标事件的目标,鼠标不在监听当前层而去监听下面的层中的元素。但是如果他的子元素设置了

    pointer-events为其他值,如auto,鼠标还是会监听这个子元素的。


    总的来说,这个属性能让标签disabled;某个元素添加了onclick事件,能让onclick失效。

    浏览器兼容性:

    firefox 3.6+ chrom 2.0+ safari 4.0+支持这个css3属性,IE6/7/8/9不支持,11支持。

    实例:a标签,不可点击

    //最后一个td的第二个a标签,不可点击
    $(this).find("td:last a").eq('1').attr("disabled",true);
    $(this).find("td:last a").eq('1').css("pointer-events","none");
    $(this).find("td:last a").eq('1').css("color","#ccc");  

    例2:     a标签,不可点击,且提示不可点击的原因

    //最后一个td的第二个a标签,不可点击,且提示不可点击的原因
    $(this).find("td:last a").eq('1').attr("disabled",true);
    //$(this).find("td:last a").eq('1').css("pointer-events","none");//此时仍禁用的话,title是没法在hover的时候显示的。
    $(this).find("td:last a").eq('1').attr("onclick","");       //将a标签的onclick时间去掉即可以达到点击没反应的目的
    $(this).find("td:last a").eq('1').attr("title","只有上传人员可以进行'删除'操作!");  
    $(this).find("td:last a").eq('1').css("color","#ccc");  
  • 相关阅读:
    react使用 UEditor富文本编辑器
    ES6、ES7的新特性、基本使用以及 async/await的基本使用
    react 生命周期
    webpack 新创项目
    TMultipartFormData上传文件
    ffmpeg水印处理
    ffmpeg通过rtsp对摄像头摄像头抓图
    ffmpeg命令行截图
    ffmpeg保存为jpg文件
    ffmpeg打开视频文件
  • 原文地址:https://www.cnblogs.com/dyhao/p/10084381.html
Copyright © 2011-2022 走看看