实现a标签置灰不可点击

禁用a标签的点击事件disabled属性和pointer-events属性值

首先 ,大家要知道: a标签 是没有disable 属性的 , 如果想用disable 禁止a标签的点击事件,也是可以实现的;往下看

1. a标签 要用 disable 属性,必须和 pointer-events属性一起使用 ,例子 如下:

HTML 部分代码:赞

JS 代码:$(".praise").attr("disabled",true);

$(".praise").css("pointer-events","none");

js 缩写 一行搞定:$(".praise").attr("disabled",true).css("pointer-events","none");

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

2. pointer-events 属性详解pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

pointer-events属性有很多值,但是对于浏览器来说,只有auto和non两个值可用,其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。

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

none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了

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

用途:

比如投票,只能投一次,点赞只能给一个人赞$(this).addClass("yizan").children().addClass("zan_icon"); 当前的a标签为已赞状态

$(".praise a").attr("disabled",true).css("pointer-events","none");//只能赞一次,禁止再次触发点击事件

其它属性值为SVG专用,这里不介绍了

3.浏览器兼容性

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性,IE6/7/8/9都不支持

html中灰色怎么写,css如何实现置灰不可点相关推荐

  1. vue组件制作专题 - (mpvue专用)在mpvue中纯自己写css实现简单左右轮播

    在mpvue中纯自己写css实现简单左右轮播 CSDN:jcLee95 邮箱:291148484@163.com 项目中,在src目录下的components目录下新建一个新文件并重命名为jcmv-c ...

  2. html中透明度怎么写,css中控制透明度

    CSS中如何控制层的透明度? 在CSS样式中设置背景的透明度,下面一个具体的实例.把类为box的层设为透明. .box{width:300px; height:200px; margin:0 auto ...

  3. html中不透明度怎么写,css如何设置div不透明度?

    在IE中需要通过"filter"来定义透明度"opacity",而在Mozilla中是可以直接解析"opacity",所以如果要使得这个效果 ...

  4. html中相对定位怎么写,css中的怎么设置相对定位?

    设置为相对定位的元素框会偏移某个距离.元素仍然保持其未定位前的形状,它原本所占的空间仍保留. css中的怎么设置相对定位? 想要设置相对定位,需要在元素中使用position属性,将其值设置为rela ...

  5. html中绝对定位如何写,CSS如何进行绝对定位

    absolute属性表示绝对定位,通过top.left.bottom.right值来设置它们相对于最近的祖先元素的位置 [推荐课程:CSS教程] 绝对定位元素的位置与文档流无关,因此它不占据任何空间. ...

  6. html中渐变怎么写,css颜色渐变怎么写?

    CSS3的语法是建立在CSS原先版本基础上的,它允许使用者在标签中指定特定的HTML元素而不必使用多余的class.ID或JavaScript. css颜色渐变可以使用css3的渐变(gradient ...

  7. html 中圆角怎么写,css圆角边框代码怎么写?(代码示例)

    本篇文章主要给大家介绍css边框效果怎么实现的. css圆角边框代码具体示例如下: css圆角边框代码实例 div { color: white; text-align:center; border: ...

  8. html中相对定位怎么写,css相对定位

    定位的四种模式:static,relative,absolute,fixed 定位的四个位置:left,right,top,bottom 定位属性:position,有四种状态值 1.static:静 ...

  9. html 中写样式,css样式中黑体怎么写

    css样式中黑体怎么写 css中通过font-family指定黑体即可.font-family:"Heiti SC","黑体-简" 如果是中文字体需要加引号,字 ...

最新文章

  1. #读书笔记 Android-Activity启动模式
  2. 自动驾驶行业观察 | 停车不再难,L2到L4的泊车辅助系统技术剖析
  3. mac 香港购买分享
  4. 深入理解Kubelet核心执行框架
  5. 【OpenCV】OpenCV函数精讲之 -- 访问图像中的像素--计时函数
  6. Install Eclipse 3.7 Indigo and configure Eclipse
  7. 微信小程序获得微信头像和昵称
  8. spring 全局变量_Spring 十个错误的使用姿势!
  9. ubuntu安装sasl失败 - 解决方法
  10. 北京市居住证办理问题的整理
  11. python中response是什么意思_python中的requests,response.text与response.content ,及其编码
  12. C++(18)——温度表达转化
  13. 微生物组-扩增子16S分析第10期(报名直播课免费参加线下2020.10)
  14. 189邮箱smpt服务器,客户端软件配置-帮助中心-中国电信189邮箱
  15. 东北大学 计算机学院 转专业,东北大学可以转专业吗 东北大学新生转专业政策...
  16. StratifiedShuffleSplit实现分层抽样交叉验证
  17. Win32汇编(SMU—C嵌入汇编)
  18. python血压测量程序代码_利用TensorFlow2.0为胆固醇、血脂、血压数据构建时序深度学习模型(python源代码)...
  19. SRE(运维)建设方案
  20. Services-服务

热门文章

  1. 点击单选按钮 实现表格的隔行变色
  2. java中的标记接口
  3. 使用Dom4j进行XML解析
  4. FastDFS存储服务器部署
  5. Android Studio设置,鼠标放上去有提示
  6. selenium2 webdriver要点理解
  7. C++中Set的使用
  8. Python核心编程答案(自整理)
  9. 分割字符串函数strtok
  10. (转)ORACLE之常用FAQ V1.08