Disabilita un collegamento HREF in PHP-JavaScript
-
02-01-2020 - |
Domanda
Ho 4 collegamenti nella mia pagina (file .phtml) come segue
<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>
.
Voglio disabilitare i collegamenti Aggiungi, rinomina ed eliminare Disabilitalo da UI .
L'utente dovrebbe essere in grado di vederlo ma non deve essere eseguito alcun evento di clic (linkshould essere disattivato).
Ho usato
- .
-
disable="disabled"
-
display =none;
ma non stanno servendo lo scopo.
Qualsiasi altro modo questo funzionerebbe?
Soluzione
Userei questo CSS per disabilitare visivamente un collegamento:
.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;
}
.
Quindi per disabilitare un collegamento inserire un disable
di classe su li
corrispondente:
<li class="download disable"><a href="#download">Download</a></li>
.
Quello che fa è fondamentalmente sovrapposti un collegamento con :before
di Pseudo Element trasparente.
Un'altra soluzione potrebbe utilizzare la regola pointer-events: none
ma non è ben supportata in IE.
Demo: http://jsfiddle.net/lpz2z/1/
Altri suggerimenti
Se stai usando jQuery, potresti voler fare questo
$(function() {
$('#addbtn').click(function(e) {
e.preventDefault();
//do other stuff when a click happens
});
}
.
Non sono sicuro che sia il modo migliore ma può fare il trucco,
Se usi
pointer-events: none; in your css
.
o se vuoi chiamarlo da JavaScript:
elem.style.display.pointerEvents = "none";
.
a interazione disabilitata con i tuoi utenti.
Utilizzare il puntatore-eventi: nessuno;
<a style='pointer-events:none;background-color:#CFCFCF;color:#000' href="javascript: void(0)">Delete</a>
. Ci sono alcune opzioni.Con il semplice vecchio JavaScript, puoi farlo, ad esempio:
<a href="mylink.html" onclick="return false;">Download</a>
.
o
<a href="javascript: void(0);">Download</a>
.
con jquery puoi facilmente disabilitare molti collegamenti:
<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>
.
E puoi persino usare CSS!
<a href="mylink.html" class="disabled">Download</a>
<style type="text/css">
a.disabled { pointer-events: none; }
</style>
.
Anche se, non ti sorprenderebbe, cioè <= v9 (se io sono corretto) non supporta questo ... e sulla maggior parte dei browser non puoi forzare il browser a utilizzare un puntatore come cursore...
Anche questo ha servito lo scopo
$("#fileMenu").disableContextMenuItems('#add');
$("#fileMenu").disableContextMenuItems('#rename');
$("#fileMenu").disableContextMenuItems('#delete');
.
Come sto usando la classe ContextMenu nel mio elenco UL.