我如何为 :tel URL 应用访问过的伪类
Posted
技术标签:
【中文标题】我如何为 :tel URL 应用访问过的伪类【英文标题】：How could I apply visited pseudo-class for :tel URL 【发布时间】：2016-12-26 03:20:57 【问题描述】：标签有问题。我在页面上有可点击的电话号码列表，我想标记使用过的网址。
我创建了一个小例子并尝试使用 :visited 选择器来更改点击的 url 的颜色，但它不起作用。
让我展示一下代码：
<!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>
我在 Google Chrome 检查器中发现 css 工作正常（我手动添加了“已访问”类并且 url 的颜色已更改），但浏览器在单击后不会将 url 标记为已访问。
是否有机会解决此问题？
谢谢！
【问题讨论】：
只是给那些回答的人一个注释，这个问题是 not 用 jQuery 标记的；到目前为止发布的解决方案 - 没有明显原因使用 jQuery - 完全有可能 - 并且很容易 - 使用纯 javascript。 顺便想一想，你的问题可能是CSS按设计工作，只是tel协议触发浏览器启动相应的应用程序来处理链接，它本身不会访问该 URI。变通办法可能是实现此功能的唯一方法。
谢谢。我认为，你是对的。
【参考方案1】：
桌面上不会发生任何事情，因为桌面浏览器不知道如何处理tel:。
您可以使用类似 jQuery 的东西在桌面上实现这一点。
$('.phone').click(function()
$('.phone').css("color": 'red');
);
【讨论】：
您好，感谢您的评论，页面重新加载后 url 会变成蓝色，这是一个主要问题。如果我没记错的话，我在我的 iPhone 上检查了“tel:”url，问题又出现了。我会再次在真机上重新检查。【参考方案2】：你必须通过 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>【讨论】：
嗨！这只是一个临时决定，因为如果我重新加载页面，url 将再次变为蓝色。主要思想是在浏览器级别存储呼叫历史记录，以允许用户不记得他/她使用的所有号码 一种解决方案是：当.phone被点击时，添加“visited”类，获取其内容（电话号码）并存储在cookie或localStorage中。页面加载时，检查 cookie 或 localStorage 并遍历所有 .phone 元素，如果 cookie/localStorage 中出现一个电话号码，则使其对应的 .phone 元素“已访问”。 是的，你是对的，但它看起来更像是解决方法，而不是原生解决方案。我希望找到使用原生 url 行为的方法。【参考方案3】：您需要在您的 CSS 中先声明 .phone，然后再声明 .phone:visited。
【讨论】：
这在本例中不会产生影响，因为.phone:visited 比 .phone（值 10）更具体（值为 20），因此顺序无关紧要，访问的样式将获胜. See this easy calculator. 问题是浏览器不记录对tel 链接的访问，因此它们没有被标记为已访问。【参考方案4】：
因此使用 javascript 会话进行管理，额外的 css 类将处理您的问题
<style type="text/css">
.selected
color: red !important;
.phone
color: blue;
</style>
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>
【讨论】：
以上是关于我如何为 :tel URL 应用访问过的伪类的主要内容，如果未能解决你的问题，请参考以下文章