wykonać href przed onClick

Question

Mam następujący link:

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

i to należy stosować następujące javascript:

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

    } 

} 

Więc to tylko pokazać galerię gdy w adresie URL jest hashtag. Ale kiedy kliknę link, nic się nie dzieje. Kiedy kliknę dwa razy, galeria znika.

Więc link najpierw tworzy javascript, a ja nie działa, bo nie ma hashtag w adresie URL, a potem wykonuje href i wstawia Hashtag w adresie URL. Jak mogę to zrobić?

Moja docelowa:

po kliknięciu na link, otworzy galerię. Aby dowiedzieć się, którą galerię muszę otworzyć, wstawiam w adresie URL hasztag. Tutaj chcę wyświetlić album HDR. I ja też chcę, jeśli moja strona będzie dostępna z hashtagiem, powinna wyświetlić galerię.!

Czy istnieje inny, łatwiejszy lub czystszy sposób, aby to zrobić? Mam nadzieję, że rozumiesz, czego chcę.

Answer 1

Dla nowoczesnych przeglądarkach, można powiązać swój kod JavaScript, żeby w razie onhashchange. Linki będą bez Javascript:

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

A Javascript jest uruchamiany, gdy hash zmieniła:

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

window.onhashchange = locationHashChanged; 

Answer 2

Czy próbowałeś wywołania setTimeout, aby opóźnić zdarzenie onclick?

Jak to:

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

Answer 3

Można uprościć to dość znacznie, to nie jest dobra praktyka, aby skorzystać z href dla innych rzeczy niż czysta nawigacja.

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

A potem:

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

    } 
} 

Answer 4

Jeśli chcesz uruchomić showGallery() bez następujący link, poprawny kod to:

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

Utrzymując href użytkownik nadal widzi miejsce docelowe na pasku stanu, a nawigacja wciąż działa dla klientów bez Javascript (np. Google). Zwracając wartość false w procedurze obsługi zdarzeń, uniemożliwisz przeglądarce śledzenie linku.

W showGallery() można następnie wyświetlić galerię i dodać "#HDR" do location.hash.

Answer 5

Nie trzeba weryfikować hasha okna, ponieważ po pierwszym kliknięciu nie ma żadnego skrótu w pasku adresu. Funkcjonalność będzie obowiązywała tylko przy drugim kliknięciu.

Co można zrobić to w ten sposób:

<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'); 
}