最近在做一个资讯客户端，用到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. crawler_爬虫_反爬虫策略

    关于反爬虫和恶意攻击的一些策略和思路   有时网站经常受到恶意spider攻击,疯狂抓取网站内容,对网站性能有较大影响. 下面我说说一些反恶意spider和spam的策略和思路. 1. 通过日志分析来 ...

  2. php禁用一些重要功能

    passthru() 功能叙述性说明:我们同意将运行外部程序和回音输出.分类似至 exec(). 临界水平:高 exec() 功能叙述性说明:同意运行外部程序(例如 UNIX Shell 要么 CMD ...

  3. 【高德地图API】那些年我们一起开发的APP—即LBS应用模式分享

    原文:[高德地图API]那些年我们一起开发的APP—即LBS应用模式分享 摘要:利用地图API都能做些什么应用呢?应用商店里所有的分类,都可以结合上LBS来丰富应用.除了传统的生活服务应用,还有新潮的 ...

  4. 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

    原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...

  5. PHP移动互联网的发展票据（6）——MySQL召回数据库基础架构[1]

    原文地址 :http://www.php100.com/html/php/api/2014/0326/6707.html 一.数据类型 1.整型 数据类型 存储空间 说明 取值范围 TINYINT 1 ...

  6. JS正则替换字符串

    1.只替换第一次出现的字符: text.replace(/javascript/i, "JavaScript");  //正则用//来将正则包起来 i表示区分大小写 2.全局替换: ...

  7. 项目管理实践 -- 健身小管家(Fitness housekeeper)的管理(2)

    继续跟踪进度 按计划应该在14号完成的工作,今天已经完成了.

  8. MVC自定义分页

    MVC自定义分页 之前我发表了一篇MVC无刷新分页的文章,里面用的是MvcPager控件,但是那个受那个控件限制,传值只能用PagedList,各方面都受到了限制,自由度不够高,现在还是做MVC无刷新 ...

  9. ie6、ie7真的不支持inline-block吗？

    本来今天想出JavaScript继承的博文的,由于也才刚学习不久,以及工作比较忙,所以暂推两天写JavaScript的继承,喜欢的童鞋们关注我的博客哟! okay,言归正传.之前在接触前端的时候,处理 ...

  10. Windows 下安装 Oracle 12c 教程

    原文 Windows 下安装 Oracle 12c 教程 申明:本文原作者:Jmq   本文给大家带来的是 Oracle 12C 的安装教程. 1.准备 1.1 下载 Oracle 12c 安装程序 ...