Jak mogę zastosować odwiedzoną pseudoklasę dla: tel URL

Mam problem z tagiem. Mam listę klikalnych numerów telefonów na stronie i chcę oznaczyć używane adresy URL.Jak mogę zastosować odwiedzoną pseudoklasę dla: tel URL

Stworzyłem mały przykład i próbowałem użyć: odwiedzonego selektora, aby zmienić kolor klikanych adresów URL, ale to nie działa.

Pokażę kod:

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

znalazłem w Google Chrome inspektora, że css działa poprawnie (I ręcznie dodane „odwiedził” klasa i kolor URL został zmieniony), ale przeglądarka nie oznaczyć URL odwiedzane po kliknięciu.

Czy istnieje szansa na naprawienie tego zachowania?

Dziękujemy!

Źródło

2016-08-19 Slava Vinogradov

Tylko uwaga do tych, odpowiadając na pytanie jest * nie * tagiem jQuery; a rozwiązania opublikowane do tej pory - z wykorzystaniem jQuery bez wyraźnego powodu - są całkowicie możliwe - i łatwo - z prostym JavaScript. –

Nawiasem mówiąc, problem, który masz, może polegać na tym, że CSS działa zgodnie z założeniami, po prostu protokół 'tel' uruchamia przeglądarkę, aby uruchomić odpowiednią aplikację do obsługi łącza, nie , odwiedź ten URI. Obejścia mogą być jedynym sposobem wdrożenia tej funkcji. –

Dziękuję. Myślę, że masz rację. –

Nic nie stanie się na pulpicie, ponieważ przeglądarki komputerów stacjonarnych nie wiedzą, co zrobić z tel:.

Możesz użyć czegoś takiego jak jQuery, aby osiągnąć to na komputerze.

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

Źródło

2016-08-19 04:18:43

Cześć, dziękuję za komentarz, adres URL będzie niebieski po przeładowaniu strony i jest to główny problem. Jeśli się nie mylę, sprawdziłem URL "tel:" na moim iPhonie i problem został powtórzony. Ponownie sprawdzę na prawdziwym urządzeniu. –

Musisz przypisać klasę poprzez 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>

Źródło

2016-08-19 04:31:05

To jest mniej zwinny sposób robienia tego, co już zasugerowałem ... –

Cześć! To tylko tymczasowa decyzja, bo jeśli przeładuję stronę, adres URL znów będzie niebieski. Główną ideą jest przechowywanie historii połączeń na poziomie przeglądarki, aby użytkownik nie pamiętał wszystkich numerów, które używał –

Jednym z rozwiązań jest: po kliknięciu .phone, dodaj "odwiedzoną" klasę, zdobądź jej zawartość (numer telefonu) i przechowywać w cookie lub localStorage. Po załadowaniu strony, sprawdź ciasteczko lub localStorage i przejdź przez wszystkie elementy .phone, jeśli jeden numer telefonu pojawi się w cookie/localStorage, spraw, aby odpowiedni element telefonu "odwiedził". – shaochuancs

-1

Musisz zadeklarować .phone pierwszy przed .phone:visited w swoim css.

Źródło

2016-08-19 04:42:12

Nie będzie to miało znaczenia w tym przykładzie, ponieważ '.phone: visited' jest bardziej specyficzne (wartość 20) niż'.phone' (wartość 10), więc zamówienie nie ma znaczenia, a odwiedzone style wygrywają. [Zobacz ten łatwy kalkulator.] (Https://specificity.keegan.st/) Problem polega na tym, że przeglądarki nie rejestrują odwiedzin w linkach 'tel', więc nie są oznaczone jako odwiedzane. – misterManSam

Więc zarządzać z javascript sesji i dodatkową klasę css będzie obsługiwać swój problem

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

Źródło

2016-08-22 10:23:31

Jak mogę zastosować odwiedzoną pseudoklasę dla: tel URL

Odpowiedz

Powiązane problemy