Bagaimana Saya Boleh Lumpuhkan Pautan Menggunakan CSS Sahaja?

Melumpuhkan Pautan dengan CSS: Panduan Lengkap

Adakah anda mempunyai keperluan untuk melumpuhkan pautan pada halaman web anda tetapi hanya bergantung pada CSS untuk penyelesaian? Jangan risau, kerana terdapat penyelesaian mudah yang boleh anda gunakan.

Cabarannya

Bayangkan anda mempunyai bar navigasi dengan pautan dan salah satu pautan mewakili halaman semasa anda berada di. Anda mahu melumpuhkan pautan ini supaya apabila diklik, tiada tindakan berlaku, menandakan pengguna sudah berada di halaman.

Penyelesaian CSS

Untuk mencapai kelumpuhan ini, kita boleh memanfaatkan atribut aria-current="page". Atribut ini menunjukkan bahawa elemen mewakili halaman semasa. Dengan menggunakan peraturan CSS berikut pada elemen dengan atribut ini, kami boleh melumpuhkan pautan:

[aria-current="page"] {
  pointer-events: none; // Prevents any cursor interaction
  cursor: default; // Resets the cursor to its default appearance
  text-decoration: none; // Removes any underlining
  color: black; // Restores the text color to black
}

Contoh Praktikal

Untuk menggunakan penyelesaian ini dalam HTML anda, hanya tambahkan atribut aria-current="page" pada elemen yang ingin anda lumpuhkan.

<a href="link.html" aria-current="page">Link</a>