最近在做一个资讯客户端，用到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. hdu1086(线段相交)

    题目意思: 给出n个线段,推断这n条线段中,线段相交的对数. http://acm.hdu.edu.cn/showproblem.php?pid=1086 题目分析: 此题主要写出推断线段相交的函数, ...

  2. MySQL汇总数据

    汇总数据 有时,数据本身是不上台面的操作数据表.但在摘要表中的数据.例如 数据的一列的平均值.极大值.至少值等一下. 对于这些频繁使用的数据的处理的概要,MySQL它提供了一个函数来处理. SQL聚集 ...

  3. 中英文url解码vc++源程序

    本文主要讨论中文url解码实现问题,没有具体解说url编码,utf-8编码.想对编解码问题有更加具体的了解,请查阅相关文档 url编码:实质字符ascii码的十六进制.仅仅是略微有些变动,须要在前面加 ...

  4. SpringMVC4 + Spring + MyBatis3

    SpringMVC4 + Spring + MyBatis3 本文使用最新版本(4.1.5)的springmvc+spring+mybatis,采用最间的配置方式来进行搭建. 1. web.xml 我 ...

  5. 用Iconv应对NodeJs对称加密技术在汉字编码与NoSQL的一些坑洞

    ·起因 汉字编码技术在实际应用中总是会存在这样或者那样的问题,尤其是在一些热门NoSQL方面多少会遇到挑战.比方说Cassandra字符集还不直接支持GB2312,要想存储写汉字那可真是麻烦.当然这还 ...

  6. ASP.NET Web API和ASP.NET Web MVC中使用Ninject

    ASP.NET Web API和ASP.NET Web MVC中使用Ninject 先附上源码下载地址 一.准备工作 1.新建一个名为MvcDemo的空解决方案 2.新建一个名为MvcDemo.Web ...

  7. JavaScript中的单引号和双引号报错的解决方法

    在使用JavaScript显示消息或者传递字符数据的时候,经常会碰到数据中夹杂单引号(')或者双引号("),这种语句往往会造成JavaScript报错.对此一般采用/'或者/"的解 ...

  8. selenium之多线程启动grid分布式测试框架封装(四)

    九.工具类,启动所有远程服务的浏览器 在utils包中创建java类:LaunchAllRemoteBrowsers package com.lingfeng.utils; import java.n ...

  9. 非常多人不愿意承认汉澳sinox已经超过windows

    汉澳sinox採用的zfs和jail打造高可靠性存储server和矩阵计算机,这不是windows和linux能相提并论的. 只是非常多人立即出来出来反驳说,windows驱动程序多(就是支持硬件多) ...

  10. Docker运行 Mono

    Docker运行 Mono Docker 是最近相当热门的一个名词,它是一个基于 Linux Container 的轻量化的虚拟技术,而微软也相当积极与 Docker 合作,在 Azure 上支持这个 ...