thực hiện href trước onClick

Question

tôi đã liên kết sau:

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

Và điều này sử dụng javascript sau:

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

    } 

} 

Vì vậy, nó chỉ hiển thị các bộ sưu tập khi trong URL là một hashtag. Nhưng khi tôi nhấp vào liên kết, không có gì xảy ra. Khi tôi nhấp vào nó hai lần, thư viện sẽ mờ dần.

Vì vậy, liên kết đầu tiên tạo javascript và tôi không hoạt động vì không có thẻ bắt đầu bằng # trong URL và sau đó, nó thực hiện href và chèn thẻ Hashtag trong URL. Tôi có thể làm như thế nào?

Mục tiêu của tôi:

Khi tôi nhấp vào liên kết, nó sẽ mở một thư viện. Để biết tôi phải mở thư viện nào, tôi chèn URL vào thẻ Hashtag. Ở đây tôi muốn hiển thị album HDR. Và tôi cũng muốn, nếu trang web của tôi được mở bằng thẻ bắt đầu bằng #, nó sẽ hiển thị thư viện.!

Có cách nào khác, dễ dàng hơn hoặc sạch hơn để làm cho nó không? Hy vọng bạn hiểu những gì tôi muốn.

Answer 1

Đối với các trình duyệt hiện đại, bạn có thể liên kết mã Javascript của mình vào sự kiện onhashchange. Liên kết sẽ được mà không có Javascript:

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

Và Javascript được chạy bất cứ khi nào băm đã thay đổi:

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

window.onhashchange = locationHashChanged; 

Answer 2

Bạn đã thử cuộc gọi setTimeout để trì hoãn sự kiện onclick chưa?

Như thế này:

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

Answer 3

Bạn có thể đơn giản hóa này khá đáng kể, nó không phải là thực hành tốt để sử dụng các href cho những thứ khác hơn là điều hướng thuần túy.

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

Và sau đó:

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

    } 
} 

Answer 4

Nếu bạn muốn chạy showGallery() mà không theo các liên kết, các mã chính xác là thế này:

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

Bằng cách giữ href người dùng vẫn thấy điểm đến trong thanh trạng thái và điều hướng vẫn hoạt động đối với khách hàng không có Javascript (tức là Google). Bằng cách trả về false trong trình xử lý sự kiện, bạn ngăn trình duyệt theo liên kết.

Trong showGallery(), bạn có thể hiển thị thư viện và thêm '#HDR' vào vị trí.hash.

Answer 5

Bạn không cần phải xác minh băm của cửa sổ, bởi vì trên lần nhấp đầu tiên bạn không có bất kỳ băm nào trong thanh địa chỉ. Chức năng này sẽ chỉ áp dụng cho lần nhấp thứ hai.

Những gì bạn có thể làm điều này là:

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