Maison >interface Web >tutoriel CSS >Comment puis-je désactiver efficacement les liens HTML dans différents navigateurs ?
Désactiver les liens HTML avec des solutions complètes
La désactivation des liens HTML peut poser des problèmes, en particulier si l'on considère la compatibilité entre les navigateurs comme Firefox et Chrome. Voici plusieurs approches pour désactiver efficacement les liens :
Méthode CSS :
Cette méthode est l'approche préférée et devrait être prise en charge par la plupart des navigateurs modernes :
a.disabled { pointer-events: none; }
Cependant, Internet Explorer 11 peut nécessiter l'utilisation de display: inline-block ou display: block pour liens.
Contrôle de la mise au point :
Pour empêcher les éléments d'être ciblés, utilisez tabindex="-1":
<a href="#" disabled tabindex="-1">...</a>
Interception des clics :
Gérer les clics à l'aide de JavaScript et rechercher les personnes handicapées attribut :
$("td > a").on("click", function(event){ if ($(this).is("[disabled]")) { event.preventDefault(); } });
Effacement du lien :
Supprimez l'attribut href, désactivant ainsi le lien :
$("td > a").each(function() { this.data("href", this.attr("href")) .attr("href", "javascript:void(0)") .attr("disabled", "disabled"); });
Faux clic Gestionnaire :
Ajoutez une fonction onclick qui renvoie false pour empêcher le lien d'être suivi :
$("td > a").attr("disabled", "disabled").on("click", function() { return false; });
Style :
Appliquer des styles pour indiquer visuellement l'état désactivé :
a[disabled] { color: gray; }
Accessibilité ARIA :
À des fins d'accessibilité, incluez l'attribut aria-disabled="true" avec l'attribut désactivé état :
<a href="#" disabled aria-disabled="true">...</a>
N'oubliez pas de prendre en compte la compatibilité entre navigateurs et de choisir soigneusement la méthode qui correspond le mieux à vos besoins spécifiques.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!