我該如何申請訪問僞類：tel URL

我遇到了標籤問題。我在頁面上列出了可點擊的電話號碼，我想標記使用的網址。我該如何申請訪問僞類：tel URL

我創建了一個小例子，並試圖使用：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>

我在谷歌瀏覽器檢查發現，CSS工作正常（我手動添加「訪問」類和URL的顏色變化），但瀏覽器不標記網址點擊後訪問。

有沒有解決此問題的機會？

謝謝！

來源

2016-08-19 Slava Vinogradov

只是說明這些回答，問題是*不*標記與jQuery;到目前爲止發佈的解決方案 - 使用jQuery沒有明顯的原因 - 完全可能 - 而且很容易 - 用普通的JavaScript。 –

順便提一下，考慮過了，你的問題可能是CSS按照設計工作，只是'tel'協議觸發瀏覽器啓動相應的應用程序來處理鏈接，它本身並不是，請訪問該URI。解決方法可能是實現此功能的唯一方法。 –

謝謝。我想你是對的。 –

桌面上不會發生任何事情，因爲桌面瀏覽器不知道如何處理tel:。

你可以使用類似jQuery的東西在桌面上實現這一點。

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

來源

2016-08-19 04:18:43

嗨，感謝您的評論，網頁重新加載後會變成藍色，這是一個主要問題。如果我沒有弄錯，我在我的iphone上檢查了「tel：」url並且問題重複了。我會再次檢查真實的設備。 –

你必須通過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>

來源

2016-08-19 04:31:05

這是一個不太敏捷的做我已經建議的方式... –

嗨！這只是一個臨時決定，因爲如果我將重新加載頁面，url將再次具有藍色。主要思想是在瀏覽器級別存儲通話記錄，以允許用戶不記得所有號碼，他/她使用 –

一個解決方案是：當單擊.phone時，添加「visited」類，獲取其內容（電話號碼）並存儲在cookie或localStorage中。加載頁面時，檢查cookie或localStorage並遍歷所有.phone元素，如果一個電話號碼出現在cookie/localStorage中，使其相應的.phone元素「訪問」。 – shaochuancs

-1

你需要在你的CSS .phone:visited之前聲明.phone第一。

來源

2016-08-19 04:42:12

這不會在這個例子中有所作爲，因爲'.phone：visited'比''更具體（值爲20）。電話「（價值10），所以訂單並不重要，訪問的風格會贏。 [見這個簡單的計算器。]（https://specificity.keegan.st/）問題是瀏覽器不記錄對'tel'鏈接的訪問，因此它們沒有被標記爲已訪問。 – misterManSam

所以使用javascript會議和額外的CSS類管理將處理你的問題

<style type="text/css"> 
     .selected { 
      color: red !important; 
     } 
     .phone { 
      color: blue; 
     } 
    </style>

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

來源

2016-08-22 10:23:31

我該如何申請訪問僞類：tel URL

回答

相關問題