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

例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{ margin:0; padding:0; }
.domain a{ display:inline-block; border:1px solid #ccc; padding:5px 10px; margin:10px; }
.domain a:active{ background-color:#c00; color:#fff; }
</style>
</head>
<body>
<div class="domain" id="js-domain">
<a href="#">点击1</a>
<a href="#">点击2</a>
</div>

<script>
window.onload = function(){
var doma=document.getElementById("js-domain").getElementsByTagName('a');
for(var i=0;i<doma.length;i++){
doma[i].addEventListener('touchstart',function(){},false);
};
}
</script>

</body>
</html>

手机端css实现active伪类的更多相关文章

  1. iOS Web开发激活css的active伪类

    最近在做一个资讯客户端,用到UIWebview展示一些网页内容,本来想做一个简单的按压效果,发现在css中设置active属性一直不管用. 查阅了一下资料,今天发现,要让css active伪类生效, ...

  2. css :active伪类的理解

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

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

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

  4. CSS Pseudo-classes（伪类）

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

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

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

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

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

  7. css中的伪类

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

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

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

  9. 微信浏览器或各种移动浏览器上:active伪类做的触觉反馈失效

    在做移动端页面的时候,会发现PC上那种:hover的效果是不管用了的,但又要给用户一个点击反馈怎么办呢?我管它叫触觉反馈. 细心点就会发现浏览器有自带了一点触觉反馈,在点击a.button.input ...

随机推荐

  1. webdriervAPI(操作cookie)

    from  selenium  import  webdriver driver  =  webdriver.Chorme() driver.get("http://www.baidu.co ...

  2. java，mysql触发器，redis生成流水号（yyyyMM000）

    最近又遇到需要根据日期生成流水号的业务,然后记录了几种生成方法,一个是通过java代码,一个是数据库的触发器,还有是通过redis.下面是代码: 通过java生成简易流水: /** * 通过日期和生成 ...

  3. WebMvcConfigurationSupport与WebMvcConfigurer的关系

    大家从网上及源码注释上查到的解释是,在spring中配置WebMvc时有两种方法,一种是继承WebMvcConfigurationSupport,重写里面相应的方法,还有一种是继承WebMvcConf ...

  4. [ZJOI2007]捉迷藏（动态点分治/（括号序列）（线段树））

    题目描述 Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiajia.Wind和孩子们决定在家里玩捉迷藏游戏.他们的家很大且构造很奇特,由N个屋子和N-1条双向走廊组成,这N-1条 ...

  5. luoguP2822-组合数问题（基础DP）

    题目链接:https://www.luogu.org/problemnew/show/P2822 题意:输入T和k,有T组询问.每组询问输入n.m,求C(i,j)能模k的个数(0<=i<= ...

  6. 小菜鸟之JAVA面试题库1

    四次挥手 客户端发送释放连接报文,关闭客户端到服务端的数据传输 服务端收到后,发送确认报文给客户端 服务端发送释放连接报文,关闭服务端到客户端的数据传输 客户端发送一个确认报文给服务端 ------- ...

  7. ASP.NET Core中使用Autofac进行属性注入

    一些无关紧要的废话: 作为一名双修程序员(自封的),喜欢那种使用Spring的注解形式进行依赖注入或者Unity的特性形式进行依赖注入,当然,形式大同小异,但结果都是一样的,通过属性进行依赖注入. A ...

  8. （模拟）关于进制的瞎搞---You Are Given a Decimal String...（Educational Codeforces Round 70 (Rated for Div. 2)）

    题目链接:https://codeforc.es/contest/1202/problem/B 题意: 给你一串数,问你插入最少多少数可以使x-y型机器(每次+x或+y的机器,机器每次只取最低位--% ...

  9. # 江西ccpc省赛-waves-(DP做法)

    江西ccpc省赛-waves-(DP做法) 题链:http://acm.hdu.edu.cn/showproblem.php?pid=6570 题意:给你长度为N,1≤N≤100000的一个数组,其中 ...

  10. Java Web开发技术教程入门-JavaBean组件与Servlet

    补更:阅战阅勇第7/8/9Days笔记 昨天我们了解了JDBC技术的一些日常操作,对于数据库而言,不仅仅的只有"增,删,改,查".博主觉得最重要的是SQL语句的优化,一个" ...