Désactiver les liens href en php-javascript

Question

J'ai 4 liens dans ma page (fichier .phtml) comme suit

<ul id="fileMenu" class="contextMenu">
    <li class="add"><a id ="addbtn" href="#add" style="display:none;">Add</a></li>
    <li class="download"><a href="#download">Download</a></li>
    <li class="rename"><a href="#rename">Rename</a></li>
    <li class="del"><a href="#delete">Delete</a></li>
    <li class="copypath"><a href="#copypath">Copypath</a></li>
</ul>

Je souhaite désactiver les liens d'ajout, de renommage et de suppressionDésactivez-le simplement depuis l'interface utilisateur .

L'utilisateur devrait pouvoir le voir mais aucun événement de clic ne doit être effectué (les liens doivent être grisés).

j'ai utilisé

1. disable="disabled"

2. display =none;

mais ils ne servent pas leur objectif.

Y a-t-il une autre façon pour que cela fonctionne ?

Answer 1

J'utiliserais ce CSS pour désactiver visuellement un lien :

.disable {
    position: relative;
}
.disable:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}
.disable a {
    color: gray;
    cursor: default;
}

Ensuite, afin de désactiver un lien, vous mettriez une classe disable sur correspondant li:

<li class="download disable"><a href="#download">Download</a></li>

Ce qu'il fait, c'est essentiellement superposer un lien avec un pseudo-élément transparent :before.

Une autre solution pourrait consister à utiliser pointer-events: none règle mais elle n’est pas bien prise en charge dans IE.

Démo : http://jsfiddle.net/LPz2Z/1/

Answer 2

Si vous utilisez jQuery, vous souhaiterez peut-être faire ceci

$(function() {
 $('#addbtn').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
 });
}

Plus d'informations, question Stackoverflow

Answer 3

je ne suis pas sûr que ce soit la meilleure solution mais ça peut faire l'affaire,

si tu utilises

pointer-events: none; in your css 

ou si vous voulez l'appeler depuis javascript :

elem.style.display.pointerEvents = "none";

pour désactiver l'interaction avec vos utilisateurs.

Answer 4

Utilisez pointer-events:aucun;

<a  style='pointer-events:none;background-color:#CFCFCF;color:#000' href="javascript: void(0)">Delete</a>

Answer 5

Il existe quelques options.Avec du javascript simple, vous pouvez faire, par exemple :

<a href="mylink.html" onclick="return false;">Download</a>

ou

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

Avec jQuery, vous pouvez facilement désactiver de nombreux liens :

<a href="mylink.html" class="disabled">Download</a>
<a href="anotherlink.html" class="disabled">Delete</a>

<script>
    jQuery(document).ready(function($) {
        $('a.disabled').on('click', function(e) {
            e.preventDefault();
        });
    });
</script>

Et vous pouvez même utiliser CSS !

<a href="mylink.html" class="disabled">Download</a>
<style type="text/css">
    a.disabled { pointer-events: none; }
</style>

Cependant, cela ne vous surprendrait pas, IE <= v9 (si j'ai raison) ne prend pas en charge cela...Et sur la plupart des navigateurs, vous ne pouvez pas forcer le navigateur à utiliser un pointeur comme curseur...

Le tout dans une démo de violon !

Answer 6

Même cela a servi le but

$("#fileMenu").disableContextMenuItems('#add');
  $("#fileMenu").disableContextMenuItems('#rename');
  $("#fileMenu").disableContextMenuItems('#delete');

car j'utilise la classe contextMenu dans ma liste ul.