最近在做一个资讯客户端，用到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 MVC+EF框架+EasyUI实现权限管理系列(5)-前台JqueryEasyUI前台实现

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(5)-前台JqueryEasyUI前台实现 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框 ...

  2. MySQL 服务器变量 数据操作DML-视图

    原文:MySQL 服务器变量 数据操作DML-视图 SQL语言的组成部分 常见分类: DDL:数据定义语言 DCL:数据控制语言,如授权 DML:数据操作语言 其它分类: 完整性定义语言: DDL的一 ...

  3. form表单target的用法，实现无刷新提交页面

    form表单的target,当将iframe设置为隐藏时,可以实现当前页表单提交而不进行跳转刷新.代码如下,首页在页面里准备一个form表单和一个iframe. <form action=&qu ...

  4. linux_增加用户组_删除用户

    添加账号组 /usr/sbin/groupadd iknow 添加账号 /usr/sbin/useradd  -g iknow -d /home/iknow/ iknow 更改密码 passwd 选项 ...

  5. 如何从 0 开始学 Ruby on Rails

    如何从 0 开始学 Ruby on Rails (漫步版)Ruby 是一门编程语言,Ruby on Rails 是 Ruby 的一个 web 框架,简称 Rails. 有很多人对 Rails 感兴趣, ...

  6. Shuttle ESB

    Shuttle ESB(六)——在项目中的应用 如果说你认真看了前面几篇关于ESB的介绍,我相信,在这一篇文章中,你将会找到很多共鸣. 尽管,市面上开源的ESB确实非常之多,像Java中的Mule E ...

  7. c# 字符串切割 split

    一直以来  都以为 string.split 里面 就只能是 一个 char 实际不是 那么回事 参数 可以是 string. eg: string strtest = "asdfg12we ...

  8. 利用webBrowser获取框架内Html页面内容

    原文:利用webBrowser获取框架内Html页面内容 利用webBrowser获取页面比较简单,MSDN下有示例,在这里不必多说. 可是一些 HTML 文档由“框架”构成,或可以存放它们自己独特 ...

  9. hdu 4893 Wow! Such Sequence!

    http://acm.hdu.edu.cn/showproblem.php?pid=4893 三种操作: 1 k d - "add" 2 l r - "query sum ...

  10. 退出手机QQ依旧显示在线

    老婆说明明看到你手机QQ在线,怎么发信息不回复?这让我非常是冤枉,我明明退出了啊! 晚上宝宝睡觉后,我们一起来研究,发现了当中的秘密,原来仅仅要选择了"退出后仍接受消息通知"这个选 ...