Tôi làm cách nào để áp dụng lớp giả được truy cập cho: tel URL

Tôi gặp sự cố với thẻ. Tôi có danh sách các số điện thoại có thể nhấp trên trang và tôi muốn đánh dấu các url đã sử dụng.Tôi làm cách nào để áp dụng lớp giả được truy cập cho: tel URL

Tôi đã tạo một ví dụ nhỏ và cố gắng sử dụng: bộ chọn được truy cập để thay đổi màu cho các url được nhấp, nhưng nó không hoạt động.

Hãy để tôi chỉ mã:

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

tôi tìm thấy trong Google Chrome thanh tra, css mà làm việc một cách chính xác (tôi tự thêm vào "viếng thăm" lớp và màu sắc url đã được thay đổi), nhưng trình duyệt không đánh dấu url như đã truy cập sau khi nhấp chuột.

Có cơ hội để khắc phục hành vi này không?

Cảm ơn bạn!

Nguồn

2016-08-19 Slava Vinogradov

Chỉ cần một lưu ý cho những người trả lời, câu hỏi được * không * tagged with jQuery; và các giải pháp được đăng cho đến nay - bằng cách sử dụng jQuery không có lý do rõ ràng - hoàn toàn có thể - và dễ dàng như vậy - với JavaScript đơn giản. –

Ngẫu nhiên, khi nghĩ về nó, vấn đề bạn có thể là CSS đang hoạt động như thiết kế, nó chỉ là giao thức 'tel' kích hoạt trình duyệt để khởi chạy ứng dụng thích hợp để xử lý liên kết, nó không, , hãy truy cập URI đó. Cách giải quyết có thể là cách duy nhất để thực hiện chức năng này. –

Cảm ơn bạn. Tôi nghĩ bạn đúng. –

Không có gì xảy ra trên máy tính để bàn vì trình duyệt trên máy tính để bàn không biết phải làm gì với tel:.

Bạn có thể sử dụng một cái gì đó như jQuery để đạt được điều này trên máy tính để bàn.

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

Nguồn

2016-08-19 04:18:43

Xin chào, cảm ơn bạn đã bình luận, url sẽ có màu xanh sau khi tải lại trang và đó là vấn đề chính. Nếu tôi không nhầm, tôi đã kiểm tra "tel:" url trên iphone của tôi và vấn đề đã được lặp lại. Tôi sẽ kiểm tra lại trên thiết bị thực một lần nữa. –

Bạn phải chỉ định lớp học thông qua 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>

Nguồn

2016-08-19 04:31:05

Đây là một cách ít nhanh nhẹn để làm những gì tôi đã gợi ý ... –

Xin chào! Nó chỉ là một quyết định tạm thời, bởi vì nếu tôi sẽ tải lại trang, url sẽ có màu xanh một lần nữa. Ý tưởng chính là lưu trữ lịch sử cuộc gọi ở cấp trình duyệt để cho phép người dùng không nhớ tất cả các số, rằng họ đã sử dụng –

Một giải pháp là: khi .điện thoại được nhấp, thêm lớp "đã truy cập", nhận nội dung của nó (số điện thoại) và lưu trữ trong cookie hoặc localStorage. Khi trang được tải, hãy kiểm tra cookie hoặc localStorage và xem qua tất cả các phần tử .phone, nếu một số điện thoại xuất hiện trong cookie/localStorage, hãy làm cho phần tử .phone tương ứng của nó "được truy cập". – shaochuancs

-1

Bạn cần phải tuyên bố đầu tiên trước khi .phone.phone:visited trong css của bạn.

Nguồn

2016-08-19 04:42:12

Điều này sẽ không tạo sự khác biệt trong ví dụ này vì '.phone: visited' là cụ thể hơn (giá trị 20) so với'.phone' (giá trị là 10) nên thứ tự không quan trọng và kiểu được truy cập sẽ thắng. [Xem máy tính dễ dàng này.] (Https://specificity.keegan.st/) Vấn đề là trình duyệt không ghi lại các lần truy cập vào các liên kết 'tel' để chúng không được đánh dấu là đã truy cập. – misterManSam

Vì vậy, quản lý với javascript phiên và thêm lớp css sẽ được xử lý vấn đề của bạn

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

Nguồn

2016-08-22 10:23:31

Tôi làm cách nào để áp dụng lớp giả được truy cập cho: tel URL

Trả lời

Các vấn đề liên quan