手机端css实现active伪类

今天遇到手机端的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>

原文地址:https://www.cnblogs.com/cyj7/p/4569310.html