Comment désactiver un lien href en JavaScript?

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

Code à partir 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>';

Essayez ceci lorsque vous ne voulez pas que l'utilisateur redirige sur clic

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

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 est de désactiver les liens uniquement lorsque vous en avez besoin, voici comment procéder:

utilisez une classe A vide, comme ceci:

a {}

puis lorsque vous souhaitez désactiver les liens, procédez comme suit:

    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 de règles CSS sont transformés en minuscules dans certains navigateurs, et ce code est sensible à la casse, il vaut donc mieux utiliser les noms de classe en minuscules pour cela

pour réactiver les liens:

GetStyleClass('a').pointerEvents = ""

consultez cette page http://caniuse.com/pointer-events pour plus d'informations sur la compatibilité du navigateur

Je pense que c'est la meilleure façon de le faire, mais malheureusement, IE, comme toujours, ne le permettra pas :) Je poste quand même, parce que je pense que cela 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 rends seulement 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 :)

Vous pouvez simplement lui donner un hachage vide:

anchor.href = "#";

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

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

Essayez ceci en utilisant jQuery:

$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

anchor.href = null;

(function ($) {
    $( window ).load(function() {
        $('.navbar a').unbind('click');
        $('.navbar a').click(function () {
            //DO SOMETHING
            return false;
        });
    });
})(jQuery);

Je trouve ce moyen plus facile à mettre en œuvre. Et cela a l'avantage que vous js. N'est pas dans votre html mais dans un fichier différent. Je pense que sans le détachement. Les deux événements sont toujours actifs. Pas certain. Mais d'une certaine manière, vous n'avez besoin que de cet événement

MDN recommande element.removeAttribute(attrName);de définir l'attribut sur null (ou sur une autre valeur) lorsque vous souhaitez le désactiver. Dans ce cas, ce seraitelement.removeAttribute("href");

https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute

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

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 vérifier si votre état a changé.

Utilisez plutôt un span et un javascript onclick. Certains navigateurs "sautent" si vous avez un lien et "#" href.

Ceci est également possible:

<a href="javascript:void(0)" onclick="myfunction()">

Link ne va nulle part car votre fonction sera exécutée.

J'avais un besoin similaire, mais ma motivation était d'éviter que le lien ne soit double-cliqué. Je l'ai accompli en utilisant jQuery:

$(document).ready(function() {
    $("#myLink").on('click', doSubmit);
});

var doSubmit = function() {
    $("#myLink").off('click');
    // do things here
};

Le HTML ressemble à ceci:

<a href='javascript: void(0);' id="myLink">click here</a>

Ainsi, les solutions ci-dessus font que le lien ne fonctionne pas, mais ne rendent pas visible (AFAICT) que le lien n'est plus valide. J'ai une situation où j'ai une série de pages et que je veux désactiver (et rendre évident qu'il est désactivé) le lien qui pointe vers la page actuelle.

Alors:

window.onload = function() {
    var topics = document.getElementsByClassName("topics");
    for (var i = topics.length-1; i > -1; i-- ) {
        for (var j = topics[i].childNodes.length-1; j > -1; j--) {
             if (topics[i].childNodes[j].nodeType == 1) {
                if (topics[i].childNodes[j].firstChild.attributes[0].nodeValue == this.n_root3) {
                    topics[i].childNodes[j].innerHTML = topics[i].childNodes[j].firstChild.innerHTML;
                }
            }
        }
    }
}

Cela parcourt la liste des liens, trouve celui qui pointe vers la page actuelle (le n_root3 peut être une chose locale, mais j'imagine qu'il documentdoit avoir quelque chose de similaire), et remplace le lien par le contenu du texte du lien.

HTH

Merci à tous...

Mon problème résolu par le code ci-dessous:

<a href="javascript:void(0)"> >>> </a>

Installez ce plugin pour jquery et utilisez-le

http://plugins.jquery.com/project/jqueryenabledisable

Il vous permet de désactiver / activer à peu près n'importe quel champ de la page.

Si vous voulez ouvrir une page sous certaines conditions, écrivez une fonction de script java et appelez-la depuis href. Si la condition est remplie, vous ouvrez la page, sinon ne faites rien.

le code ressemble à ceci:

<a href="javascript: openPage()" >Click here</a>

and function:
function openPage()
{
if(some conditon)
opener.document.location = "http://www.google.com";
}
}

Vous pouvez également placer le lien dans un div et définir la propriété d'affichage de l'attribut Style sur aucun. cela masquera le div. Par exemple,

<div id="divid" style="display:none">
<a href="Hiding Link" />
</div>

Cela masquera le lien. Utilisez un bouton ou une image pour rendre ce div visible maintenant en appelant cette fonction dans onclick comme:

<a href="Visible Link" onclick="showDiv()">

and write the js code as:

function showDiv(){
document.getElememtById("divid").style.display="block";
}

Vous pouvez également mettre une balise d'identification sur la balise html, donc ce serait

<a id="myATag" href="whatever"></a>

Et obtenez cet identifiant sur votre javascript en utilisant

document.getElementById("myATag").value="#"; 

L'un de ces éléments doit fonctionner à coup sûr haha

Une autre méthode pour désactiver le lien

element.removeAttribute('href');

la balise d'ancrage sans href réagirait comme du texte désactivé / brut

<a> w/o href </a>

au lieu de <a href="#"> with href </a>

voir jsFiddel

j'espère que c'est utile.

Au lieu de void, vous pouvez également utiliser:

<a href="javascript:;">this link is disabled</a> 

0) il vaut mieux se rappeler que certains navigateurs "sautent" si vous avez un lien et "#" href. Le meilleur moyen serait donc un JavaScript personnalisé

1) Si vous recherchez le JavaScript personnalisé , le voici:

<a href="#" onclick="DoSomething(); return false;">Link</a>

Le "return false" empêche le lien d'être effectivement suivi.

2) Vous pouvez envisager d' éviter d'utiliser les

<a href="javascript:void(0);" onclick="DoSomething();">Link</a>

ou

  <a href="javascript:;" onclick="DoSomething();">Link</a>

Parce que le pseudo-protocole javascript peut mettre la page en état d'attente dans certains navigateurs, ce qui peut avoir des conséquences inattendues. IE6 est connu pour cela. Mais si vous ne vous souciez pas d'IE6 et que vous testez tout, cela peut être une bonne solution.

3) Si vous avez déjà jQueryet bootstrapdans votre projet, vous pouvez envisager de les utiliser comme ceci:

$('.one-click').on("click", function (e) {
   $( this ).addClass('disabled');
});

où la .disabledclasse vient du bootstrap.

Site de bootstrap du formulaire Qupte ( ici )

Mise en garde relative à la fonctionnalité de lien

La classe .disabled utilise pointer-events: nonepour essayer de désactiver la fonctionnalité de lien de s, mais cette propriété CSS n'est pas encore normalisée. En outre, même dans les navigateurs qui prennent en charge les événements de pointeur: aucun, la navigation au clavier reste inchangée, ce qui signifie que les utilisateurs de clavier voyants et les utilisateurs de technologies d'assistance pourront toujours activer ces liens. Donc, pour être sûr, ajoutez un tabindex="-1"attribut sur ces liens (pour les empêcher de recevoir le focus clavier) et utilisez custom JavaScriptpour désactiver leur fonctionnalité.

et le a custom JavaScriptété montré dans la section 1

Ci-dessous le code pour les liens désactivés:

<a href="javascript: void(0)">test disabled link</a> 

une autre solution très simple est:

<a href="#">test disabled link</a>

La première solution est efficace.