实现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. mysql表 字段 说明_mysql表字段说明
  2. ES6 Map数据结构
  3. m_Orchestrate learning system---六、善用组件插件的好处是什么
  4. 【2018.6.7】阶段总结
  5. linux系统有gotoxy函数,gotoxy() implementation for Linux using printf
  6. 【动画演示软件】Focusky教程 | 加入 配音/录音/字幕
  7. ZAO作一下,你会是谁
  8. python爬取qq音乐下载歌曲
  9. 快狐未能连接服务器,航海王强者之路好友福袋开启详细介绍_快狐快狐视频app...
  10. c语言通用数据结构和常用算法库,基于C语言的通用数据结构和算法库
  11. ps里jpg格式的图怎么保存成透明的
  12. r3 2200g参数 r3 2200g功耗 酷睿r32200g核显相当于什么显卡
  13. git commit 提交出错,工作区代码被回退到最开始内容
  14. crontab 调度程序按时执行
  15. ApkScan-PKID 查壳工具下载使用以及相关技术介绍
  16. Fuchsia OS 将推送给所有第一代 Nest Hub 设备
  17. java 根据经纬度坐标查询出来附近店铺
  18. 记可视化项目代码设计的心路历程以及理解
  19. Mysql 8.0.26安装,听我的6分钟让你安装成功!
  20. 成为Java顶尖程序员 ,看这12本书就够了

热门文章

  1. javascript中new url()属性,轻松解析url地址
  2. 如何将div高度填满剩余高度
  3. IOS9 微信支付报 prepayid 获取失败 ErrorDomainSSL, -9802
  4. 敏捷个人新体系学习 - 1.实践的艺术
  5. 安卓真机测试遇到的检测不到安卓设备的问题
  6. 数学分析原理 定理 6.12
  7. 思科精睿系列交换机被曝高危漏洞,仅修复部分产品
  8. CString的成员函数用法大全
  9. 三次元的世界里,机械臂的手活儿也无敌了
  10. matlab的和操作