Come posso creare un'ancora HTML vuoto in modo che la pagina non “saltare” quando lo scatto?

StackOverflow https://stackoverflow.com/questions/493175

  •  20-08-2019
  •  | 
  •  

Domanda

Sto lavorando su alcuni JQuery per nascondere / mostrare alcuni contenuti quando clicco un link. Posso creare qualcosa di simile: 

<a href="#" onclick="jquery_stuff" />

Ma se clicco che puntano mentre sto scorrere verso il basso su una pagina, si tornerà indietro fino alla parte superiore della pagina.

Se faccio qualcosa di simile: 

<a href="" onclick="jquery_stuff" />

La pagina si ricaricherà, che sbarazza pagina di tutti i cambiamenti che ha fatto javascript.

Qualcosa di simile a questo: 

<a onclick="jquery_stuff" />

mi darà l'effetto desiderato, ma non è più si presenta come un link. C'è qualche modo per specificare un'ancora vuoto in modo da poter assegnare un gestore di javascript per il onclick evento, senza cambiare nulla sulla pagina o spostare la barra di scorrimento?

È stato utile?

Soluzione

mettere un "return false;" sulla seconda opzione: 

<a href="" onclick="jquery_stuff; return false;" />

Altri suggerimenti

È necessario return false; dopo il jquery_stuff: 

<a href="no-javascript.html" onclick="jquery_stuff(); return false;" />

Questo annullerà l'azione predefinita.

Si può mettere semplicemente come come di seguito: 

<a href="javascript:;" onclick="jquery_stuff">

jQuery ha una funzione built in per questo chiamato preventDefault che può essere trovato qui: http://api.jquery.com/event.preventDefault/

Ecco il loro esempio: 

<script>
$("a").click(function(event) {
    event.preventDefault();
});
</script>

È anche possibile costruire il link come questo: 

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

Controlla eyelidlessness commento (utilizzare un pulsante, senza un ancoraggio). Era sul punto di inviare lo stesso consiglio. Un'ancora che non puntano a una risorsa e solo esegue uno script dovrebbe essere implementato come un pulsante.

  

Stop mettere i vostri gestori di eventi in formato HTML, e smettere di usare i tag di ancoraggio   che non servono ancorare scopi semantiche. Utilizzare un pulsante e aggiungere il   clicca gestore in Javascript. Esempio: HTML e JavaScript <button id="jquery_stuff">Label</button>   $('#jquery_stuff').click(jquery_stuff);. È possibile utilizzare i CSS per lo stile della   Pulsante a guardare come un link, rimuovendo padding, bordi, margini e   background-color, quindi aggiungendo il tuo stili di collegamento (ad es. a colori e   text-decoration). - eyelidlessness 19 ottobre '10 alle 17:40 

<a href="javascript:;" onclick="jquery">link</a>

href richiede qualcosa in là, se si vuole che non pop up errori in validatori per l'HTML. Il javascript:; è un buon posto supporto.

Se davvero si vuole utilizzare il #: 

<a href="#me" name="me" onclick="jquery">link</a>

Fare attenzione al return false;, si ferma comportamenti di default di qualsiasi cosa stiate facendo.

Anche se il vostro js è come un presentare si può incorrere in problemi in Internet Explorer. 

<a href="javascript:// some helpful comment " onclick="jquery_stuff" />

Io di solito uso un <span> e stile a guardare come un collegamento quando ho bisogno di realizzare qualcosa di simile. 

  <a href="#" class="falseLinks">Link1</a>
  <a href="#" class="falseLinks">Link2</a>

etc ..

JQuery: 

  $(function() {
    $("a.falseLinks").click(function() {
      // ...other stuff you want to do when links is clicked

      // This is the same as putting onclick="return false;" in HTML
     return false;
    })
  });

@eyelidlessness era un po 'Douchy nel modo in cui ha detto, ma aveva ragione. Questo è il modo più pulito per farlo. Perché usare jQuery se stai andando poi tornare a vaniglia Javascript per le cose di jQuery fa più facile e più pulito?

Di solito fare: 

<a style="cursor:pointer;" onclick="whatever();">Whatever</a>

Che ne dite di questo: 

<a href="#nogo" onclick="foo();">some text</a>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top