最近在做一个资讯客户端，用到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. hdu Online Judge

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1073 数据判断,主要是如何判断WA和PE,吸收字符! 代码: #include <stdio.h ...

  2. Scrapy研究和探索（七）——如何防止被ban大集合策略

    说来设置的尝试download_delay少于1,不管对方是什么,以防止ban策略后.我终于成功ban该. 大约scrapy利用能看到以前的文章: http://blog.csdn.net/u0121 ...

  3. 【百度地图API】手机浏览器抓包工具及其使用方法

    原文:[百度地图API]手机浏览器抓包工具及其使用方法 摘要:为了测试地图API在手机浏览器上的性能,需要给手机浏览器设置代理.通过代理,我们可以在PC上获取到抓包数据.进而对性能做进一步分析. -- ...

  4. [CLR via C#]5.4 对象哈希码和dynamic基元类型

    原文:[CLR via C#]5.4 对象哈希码和dynamic基元类型 FCL的设计者认为,如果能将任何对象的任何实例放到一个哈希表集合中,会带来很多好处.为此,System.Object提供了虚方 ...

  5. WebBrowser!

    原文:WebBrowser! 我现在先放一些基础的文章在这里,以后再放别的上来官方范例连接http://www.microsoft.com/china/msdn/library/langtool/vc ...

  6. MVC验证13-2个属性至少输入一项

    原文:MVC验证13-2个属性至少输入一项 有时候,我们希望2个属性中,至少有一个是必填,比如: using Car.Test.Portal.Extension;   namespace Car.Te ...

  7. 在线Youtube视频下载，修改文本，剪切制作动画的最新方法

    刚刚(减去编写本文章的时间,大概20分钟前吧)在看国外最新技术资讯的时候发现有个方法可以让我们快速去下载Youtube上面的视频,不敢独享,我自己都没有怎么玩就所以立刻post上来广而告之,希望对大家 ...

  8. OpenGL入门【1 高速入门】

    // OpenGL.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include &l ...

  9. MonkeyDevcie API 实践全记录

    1.    背景 使用SDK自带的NotePad应用作为实践目标应用,目的是对MonkeyDevice拥有的成员方法做一个初步的了解. 以下是官方列出的方法的Overview. Return Type ...

  10. C语言与sqlserver数据库

    原文:C语言与sqlserver数据库 1.使用C语言来操作SQL SERVER数据库,采用ODBC开放式数据库连接进行数据的添加,修改,删除,查询等操作. step1:启动SQLSERVER服务,例 ...