我如何应用访问伪类:tel URL

How could I apply visited pseudo-class for :tel URL

本文关键字：tel URL 访问 何应用 应用      更新时间：2023-09-26

我有一个问题的标签。我在页面上有可点击的电话号码列表，我想标记使用的url。

我创建了一个小例子，并试图使用:访问选择器来改变点击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>

我在谷歌浏览器检查器中发现，css工作正常(我手动添加了"访问过"类和url的颜色被改变)，但浏览器没有标记url为点击后访问过。

是否有机会修复此行为?

谢谢!

桌面浏览器不知道如何处理tel:。

你可以使用jQuery之类的东西在桌面上实现。

$('.phone').click(function() {
  $('.phone').css({"color": 'red'});
});

您必须通过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>

所以管理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>

你需要在你的css中首先声明.phone，然后才是.phone:visited。

相关文章：