eseguire href prima onClick

Question

Sono il seguente link:

<a href="#HDR" onClick="showGallery()">I</a> 

E questo uso il seguente javascript:

function showGallery(){ 
    if(window.location.hash) { 
     $('#gallery').fadeIn('fast'); 
     var hash = window.location.hash.substring(1); 
     alert(hash); 
    } else { 

    } 

} 

Quindi mostrare solo la galleria quando nell'URL è un hashtag. Ma quando clicco sul link, non succede nulla. Quando clicco due volte, la galleria si dissolve.

Quindi il collegamento innanzitutto rende il javascript, e non funziona perché non c'è hashtag nell'URL e dopo, esegue l'href e inserisce l'hashtag nell'URL. Come posso farlo?

il mio obiettivo:

Quando clicco su un link, si apre una galleria. Per sapere quale galleria devo aprire, inserisco nell'URL un hashtag. Qui voglio visualizzare l'album HDR. E voglio anche che, se il mio sito si apre con un hashtag, dovrebbe visualizzare la galleria.!

C'è anche un altro, più facile o più pulito modo di farlo? Spero tu capisca quello che voglio.

Answer 1

per i browser moderni, è possibile associare il codice Javascript per l'evento onhashchange. Link saranno senza Javascript:

<a href="#HDR">I</a> 

E il Javascript è eseguito ogni volta che l'hash è cambiato:

function locationHashChanged() { 
    if (location.hash === "#HDR") { 
     $('#gallery').fadeIn('fast'); 
    } 
} 

window.onhashchange = locationHashChanged; 

Answer 2

Hai provato una chiamata setTimeout per ritardare l'evento onclick?

Ti piace questa:

<a href="#HDR" onClick="setTimeout(function(){showGallery.call(this)},20)">I</a> 

Answer 3

È possibile semplificare questo modo considerevole, non è buona norma utilizzare il href per altre cose di pura navigazione.

<a onClick="showGallery('HDR')">I</a> 

E poi:

function showGallery(name){ 
    if(name) { 
     $('#gallery').fadeIn('fast'); 
     alert(name); 
    } else { 

    } 
} 

Answer 4

Se si desidera eseguire showGallery() senza seguire il link, il codice corretto è questo:

<a href="#HDR" onClick="showGallery(); return false;">I</a> 

Mantenendo il href l'utente ancora vede la destinazione nella barra di stato e la navigazione funziona ancora per i client senza Javascript (cioè Google). Restituendo false nel gestore di eventi, si impedisce al browser di seguire il collegamento.

In showGallery(), è quindi possibile mostrare la galleria e aggiungere "#HDR" al percorso.

Answer 5

Non è necessario verificare l'hash della finestra, perché al primo clic non è presente alcun hash nella barra degli indirizzi. La funzionalità verrà applicata solo al secondo clic.

Che cosa si può fare è questo:

<a href="#HDR" id="g1" onClick="showGallery('g1')">gallery 1</a>

function showGallery(galid){ 
    var linkhash = $('#' + galid).attr('href').substring(1); 

    alert(linkhash); 

    $('#gallery' + linkhash).fadeIn('fast'); 
}