Comment désactiver un lien href en JavaScript ?

Question

J'ai une étiquette <a href="#"> Previous </a> 1 2 3 4 <a href="#"> Next </a> et dans certaines conditions, je veux que cette balise soit complètement désactivée.

Code des commentaires (c'est ainsi que le lien est généré)

if (n_index != n_pages) 
    a = a+'<li><a href="#" onclick="javascript:paginateAjaxPage('+(n_index+1) +','+stype+');">></a></li><li><a href="#" onclick="javascript:paginateAjaxPage('+n_pages+','+stype+');" >>></a></li>'; 
else 
    a = a+'<li><a style="cursor: pointer;" onclick="return false;">></a></li><li><a style="cursor: pointer;" onclick="return false" >>></a></li>'; 
a = a+'</ul></div>';

Answer 1

Essayez ceci quand vous ne voulez pas que l'utilisateur soit redirigé sur le clic.

<a href="javascript: void(0)">I am a useless link</a>

Answer 2

Vous pouvez désactiver tous les liens d'une page avec cette classe de style :

a {
    pointer-events:none;
}

maintenant, bien sûr, l'astuce consiste à désactiver les liens uniquement lorsque vous en avez besoin, voici comment faire :

utiliser une classe A vide, comme ceci :

a {}

puis quand vous voulez désactiver les liens, faites ceci :

    GetStyleClass('a').pointerEvents = "none"

    function GetStyleClass(className)
    {
       for (var i=0; i< document.styleSheets.length; i++) {
          var styleSheet = document.styleSheets[i]

          var rules = styleSheet.cssRules || styleSheet.rules

          for (var j=0; j<rules.length; j++) {
             var rule = rules[j]

             if (rule.selectorText === className) {
                return(rule.style)
             }
          }
       }

       return 0
    }

REMARQUE : Les noms des règles CSS sont transformés en minuscules dans certains navigateurs, et ce code est sensible à la casse, il est donc préférable d'utiliser des noms de classe en minuscules pour cela.

pour réactiver les liens :

GetStyleClass('a').pointerEvents = ""

consultez cette page http://caniuse.com/pointer-events pour des informations sur la compatibilité des navigateurs

Je pense que c'est la meilleure façon de le faire, mais malheureusement, IE, comme toujours, ne le permet pas :) Je poste quand même ce message, car je pense qu'il contient des informations qui peuvent être utiles, et parce que certains projets utilisent un navigateur connu, comme lorsque vous utilisez des vues web sur des appareils mobiles.

si vous voulez juste désactiver UN lien (je me suis seulement rendu compte que c'était la question), j'utiliserais une fonction qui définit manuellement l'url de la page actuelle, ou non, en fonction de cette condition. (comme la solution que vous avez acceptée)

cette question était beaucoup plus facile que je ne le pensais :)

Answer 3

Vous pouvez simplement lui donner un hash vide :

anchor.href = "#";

ou, si cela n'est pas suffisant pour "désactiver", utilisez un gestionnaire d'événements :

anchor.href = "javascript:void(0)";

Answer 4

anchor.href = null;

Answer 5

Le moyen le plus simple de désactiver un lien est tout simplement de ne pas l'afficher. Exécutez cette fonction chaque fois que vous voulez tester si votre condition est remplie pour masquer le bouton Précédent (remplacez if (true) avec votre état) :

var testHideNav = function() {
    var aTags = document.getElementsByTagName('a'),
        atl = aTags.length,
        i;

    for (i = 0; i < atl; i++) {
        if (aTags[i].innerText == "Previous") {
            if (true) { // your condition to disable previous
                aTags[i].style.visibility = "hidden";
            } else {
                aTags[i].style.visibility = "visible";
            }
        } else if (aTags[i].innerText == "Next") {
            if (false) { // your condition to disable next
                aTags[i].style.visibility = "hidden";
            } else {
                aTags[i].style.visibility = "visible";
            }
        }
    }
};

Ensuite, exécutez testHideNav() à chaque fois que vous devez faire le contrôle si votre état a changé.