Question

我遇到了标签问题。我在页面上有可点击的电话号码列表，我想标记用过的网址。

我创建了一个小例子，并试图使用：被访问的选择器来更改点击的网址的颜色，但它不起作用。

让我展示代码：

<!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工作正常（我手动添加＆＃34;已访问＆＃34;类和网址的颜色已更改），但浏览器未将网址标记为已访问点击。

有没有机会解决这个问题？

谢谢！

Answer 1

桌面上不会发生任何事情，因为桌面浏览器不知道如何处理tel:。

你可以使用像jQuery这样的东西在桌面上实现这一点。

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

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

Answer 3

因此，使用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>

Answer 4

您需要先在{c}中.phone之前声明.phone:visited。

我如何应用访问过的伪类：tel URL

4 个答案: