手机端css实现active伪类

2023-04-27 00:48•css•阅读 1576

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

例子如下：

<!DOCTYPE html>

<html >

<head>

<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>

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>