我如何应用访问过的伪类：tel URL
[英]How could I apply visited pseudo-class for :tel URL
问题描述
I got a problem with tag. 
我的标签出了问题。 I have list of clickable phone numbers on the page and I want to mark used urls. 我在页面上有可点击的电话号码列表，我想标记用过的网址。
I created small example and tried to use :visited selector to change color for clicked urls, but it doesn't work. 我创建了一个小例子并试图使用：被访问的选择器来改变点击的网址的颜色，但它不起作用。
Let me show the code: 让我展示一下代码：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.phone:visited {
color: red;
}
.phone {
color: blue;
}
</style>
</head>
<body>
<h1>Hi</h1>
<a class="phone" href="tel:#">Call me</a>
</body>
</html>
I found in Google Chrome inspector, that css works correctly (I manually added "visited" class and url's color was changed), but browser doesn't mark url as visited after click. 我在Google Chrome检查器中发现，css工作正常（我手动添加了“已访问”类，并且网址颜色已更改），但浏览器在点击后未将网址标记为已访问。
Is there any chance to fix this behavior? 有没有机会解决这个问题？
Thank you! 谢谢！
4 个解决方案
解决方案1
0 2016-08-19 04:18:43
Nothing will happen on desktop, because desktop browsers don't know what to do with tel: . 桌面上不会发生任何事情，因为桌面浏览器不知道如何处理tel: .
You could use something like jQuery to achieve this on desktop. 您可以使用类似jQuery的东西在桌面上实现这一点。
$('.phone').click(function() {
$('.phone').css({"color": 'red'});
});
解决方案2
0 2016-08-19 04:31:05
You have to assign class through jquery. 你必须通过jquery分配类。
$('.phone').click(function () { $(this).addClass("visited"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <style type="text/css"> .visited { color: red !important; background-color: yellow; } .phone { color: blue; } </style> </head> <body> <h1>Hi</h1> <a class="phone" href="#">Call me</a> <a class="phone" href="#">Calling you</a> </body> </html>
解决方案3
0 2016-08-22 10:23:31
So manage with javascript session and additional css class will be handle your problem 因此，使用javascript会话进行管理，其他css类将处理您的问题
<style type="text/css">
.selected {
color: red !important;
}
.phone {
color: blue;
}
</style>
JS JS
<script type="text/javascript">
var a = document.getElementsByTagName("a");
//I assumed there is only one a link so tried with index 0
if(sessionStorage.getItem("visited") != null) a[0].classList.add("selected"); //check visited link then add class selected
a[0].addEventListener("click",function(){
sessionStorage.setItem("visited","true");//set session visited
this.classList.add("selected");
});
</script>
解决方案4
-1 2016-08-19 04:42:12
您需要在.phone之前先声明.phone .phone:visited在您的CSS中.phone:visited 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.