最近在做一个资讯客户端，用到UIWebview展示一些网页内容，本来想做一个简单的按压效果，发现在css中设置active属性一直不管用。

查阅了一下资料，今天发现，要让css active伪类生效，只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功。

下面简单以一个文本作为例子：

<!DOCTYPE html>

<html>

<head>

<style>

p {

    color: yellow;

}

p:active {

    color: red;

}

</style>

</head>

<body>

    <p>测试Active文本</p>

</body>

<script>

    var p=document.getElementsByTagName('p');

    for(var i=0;i<p.length;i++){

        p[i].addEventListener('touchstart',function(){},false);

    };

</script>

</html>

用JS代码获取这个元素，然后通过addEventListener添加一个touchstart的方法即可。

当点击到文本时，就能发现颜色从黄变红，active伪类生效啦！

iOS Web开发激活css的active伪类的更多相关文章

  1. 手机端css实现active伪类

    今天遇到手机端的css中a标签的active不起作用,原本想循环a标签,给当前的a标签添加class来解决,可觉得有点儿小麻烦,经查资料了解到解决此问题,只需要添加一个touchstart的空事件即可 ...

  2. 解决scroll在ios上卡顿问题和兼容ios不支持:active伪类情况

    //有时候因为滚动层级元素过多会产生卡顿,特别在ios上十分明显,如果不想更换其他实现方式,可以加:-webkit-overflow-scrolling: touch; 开启硬件加速: 兼容ios不支 ...

  3. css :active伪类的理解

    /*active伪类为点击鼠标按下去还没松开鼠标的那一瞬间的事件*/

  4. 移动端:active伪类无效的解决方法

    :active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式.最常用于锚点<a href="#">这种情况,一般主流浏览器下也支持其他元素,如button等. ...

  5. 移动端bug~~移动端:active伪类无效的解决方法【移动端 ：active样式无效】

    移动端:active伪类无效的解决方法[移动端 :active样式无效]2016-09-26  15:46:50 问题: 移动端开发的时候实现按钮的点击样式变化,但是在iphone[safiri Mo ...

  6. Web标准：五、超链接伪类

    Web标准:五.超链接伪类 知识点: 1.链接的四种样式 2.将链接转换为块状 3.用css制作按钮 4.首字下沉   1)链接的四种样式 超链接有四个伪类,分别是: a:link 未访问的链接 a: ...

  7. css中的伪类

    伪类用于向某些选择器添加一些特殊效果. 1):focus 伪类在元素获得焦点的时向元素添加特殊样式.一般用于输入文本域,按钮,以及超链接. a:focus{color:red;}超链接字体为红色 in ...

  8. CSS Pseudo-classes（伪类）

    CSS Pseudo-classes(伪类) CSS伪类是用来添加一些选择器的特殊效果. 一.语法 伪类的语法: selector:pseudo-class {property:value;} CSS ...

  9. CSS属性、伪类选择器，CSS3选择器

    CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...

随机推荐

  1. Asp.Net超时问题汇总

    在数据库或者请求操作时,如果选择的时间段过短或操作数据量过大,就会遇到"请求超时"的的问题,网络上提供很多解决方案,但普遍不完善,根据个人经验及参考网络解决方案,先将其汇总如下: ...

  2. 基于Qt语音识别功能

    基于在最近的研究Qt语音识别平台下.在此记录12 首先,语音识别做三件事 1.记录用户的语音文件到本地 2.将用户语音编码 使用flac或者speex进行编码 3.使用第三方语音识别API或者SDK进 ...

  3. 私人定制javascript事件处理机制(浅谈)

    看到园子里关于事件监听发表的文章,我都有点不好意思写了.不过想想我的题目以私人定制作开头也就妥妥地写吧. 事件相关概念 1.事件类型 发生事件的字符串 有传统事件类型 比如表单.window事件等 D ...

  4. Quartz使用-入门使用(java定时任务实现)

    注:这里使用的是Quartz1.6.5版本号(包:quartz-1.6.5.jar) //測试main函数 //QuartzTest.java package quartzPackage; impor ...

  5. 三星GT-S7572换屏幕教程

    家里人手机被摔坏了,尽管不是什么值钱的手机.可是自从上了大学之后,就一直认为赚钱真的非常不easy,不到逼不得已,就不要乱花钱.于是,就从淘宝上买了外屏.以下是我在淘宝上的链接:点击打开链接.好不ea ...

  6. IntelliJ IDEA —— Android开发的另一个选择

    IntelliJ IDEA —— Android开发的另一个选择 很早就听过Eclipse的大名,但在我初学Java的时候,一位前辈推荐的IDE却是IntelliJ IDEA.因为之前用过JetBra ...

  7. php操作xml并插入到数据库中

    php操作xml并插入到数据库中 <? php header('content-type:text/html;charset=utf-8'); mysql_connect('localhost' ...

  8. Floodlight controller 线程池模型

         官方文档对于ThreadPool的描写叙述是:ThreadPool is a Floodlight module wrapper for a Java's ScheduledExecutor ...

  9. elasticsearch集群搭建实例

    elasticsearch集群搭建实例 下个月又开始搞搜索了,几个月没动这块还好没有落下. 晚上在自己虚拟机上搭建了一个简易搜索集群,分享一下. 操作系统环境: Red Hat 4.8.2-16 el ...

  10. solr中重跑索引

    solr与.net系列课程(八)solr中重跑索引的注意事项   solr与.net系列课程(八)solr中重跑索引的注意事项 我们如果在项目中使用solr,那肯定就是把数据库中的数据跑进solr服务 ...