Today encountered mobile phone side of the CSS in a tag active does not work, originally wanted to loop a tag, to the current a tag to add class to solve, can feel a little trouble, after checking the information to understand to solve this problem, only need to add a touchstart empty event can be.
Examples are as follows:
<! DOCTYPE html>
<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>
<body>
<div class= "domain" id= "js-domain" >
<a href= "#" > Click 1</a>
<a href= "#" > Click 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>
Mobile-side CSS implements active Pseudo-class