如果（window.location.hash）事件只是部分執行

我試圖使用hashtags來顯示通過單擊導航欄中顯示的div。（我使用jQuery，而不是對頁面中的鏈接，我希望他們直接可鏈接。）如果（window.location.hash）事件只是部分執行

出於某種原因，它只是造成零件。點擊功能發生！ ???

這裏是我的腳本（我是新的，我敢肯定，這是可怕的不雅，但它完成工作）

//Close 
$('#close').click(function() { 
    $('#bio, #books, #extras, #news, #contact').fadeOut('slow'); 
    $('.bio, .books, .extras, .news, .contact').removeClass('nav-selected'); 
    $('#background').fadeTo('slow',1); 
    $('#close').fadeTo('slow',0); 
    window.location.hash = ''; 
}); 

//Title 
$('#titlelink').click(function() { 
    $('#bio, #books, #extras, #news, #contact').fadeOut('slow'); 
    $('.bio, .books, .extras, .news, .contact').removeClass('nav-selected'); 
    $('#background').fadeTo('slow',1); 
    window.location.hash = ''; 
}); 

//Bio 
$('.bio').click(function() { 
    $('#bio').fadeIn('slow'); 
    $('.bio').addClass('nav-selected'); 
    $('#books, #extras, #news, #contact').fadeOut('slow'); 
    $('.books, .extras, .news, .contact').removeClass('nav-selected'); 
    $('#background').fadeTo('slow', 1); 
    $('#title').fadeIn('slow'); 
    $('#close').fadeTo('slow',0.8); 
    window.location.hash = 'bio'; 
}); 

//Books 
$('.books').click(function() { 
    $('#bookswrap, #books').fadeIn('slow'); 
    $('.books').addClass('nav-selected'); 
    $('#bio, #extraswrap, #newswrap, #contact').fadeOut('slow'); 
    $('.bio, .extras, .news, .contact').removeClass('nav-selected'); 
    $('#background').fadeTo('slow', 0.2); 
    $('#close').fadeTo('slow',0.8); 
    window.location.hash = 'books'; 
}); 

//Extras 
$('.extras').click(function() { 
    $('#extraswrap, #extras').fadeIn('slow'); 
    $('.extras').addClass('nav-selected'); 
    $('#bio, #bookswrap, #newswrap, #contact').fadeOut('slow'); 
    $('.bio, .books, .news, .contact').removeClass('nav-selected'); 
    $('#background').fadeTo('slow', 0.2); 
    $('#title').fadeIn('slow'); 
    $('#close').fadeTo('slow',0.8); 
    window.location.hash = 'extras'; 
}); 

//News 
$('.news').click(function() { 
    $('#newswrap, #news').fadeIn('slow'); 
    $('.news').addClass('nav-selected'); 
    $('#bio, #bookswrap, #extraswrap, #contact').fadeOut('slow'); 
    $('.bio, .books, .extras, .contact').removeClass('nav-selected'); 
    $('#background').fadeTo('slow', 0.2); 
    $('#title').fadeIn('slow'); 
    $('#close').fadeTo('slow',0.8); 
    window.location.hash = 'news'; 
}); 

//Magnus 
$('.magnus').click(function() { 
    window.open('http://magnusflyte.com/'); 
}); 

//Contact 
$('.contact').click(function() { 
    $('#contact').fadeIn('slow'); 
    $('.contact').addClass('nav-selected'); 
    $('#bio, #books, #extras, #news').fadeOut('slow'); 
    $('.bio, .books, .extras, .news').removeClass('nav-selected'); 
    $('#background').fadeTo('slow', 1); 
    $('#title').fadeIn('slow'); 
    $('#close').fadeTo('slow',0.8); 
    window.location.hash = 'contact'; 
}); 

if(window.location.hash) { 
    $('.' + window.location.hash.substr(1)).click(); 
}

所以，當我重新加載哈希頁面的背景變淡正確和類切換正確，但divs（例如#bookswrap，#books）不會淡入。

任何想法？我想這是愚蠢的，因爲我是新手。

來源

2013-08-07 milpool

你有鏈接到演示？我會更容易看到發生了什麼 – Keith

您可以使用這樣的網站創建一個快速演示：http://jsfiddle.net/ –

這是頁面頂部或底部？我的猜測是，前幾行沒有運行，因爲頁面還沒有完全加載，race condition，但較低的行正在運行，因爲jQuery將它放在它的內部事件隊列中，所以它們實際上在幾毫秒後運行。如果多數民衆贊成的情況下，只是包裝這整個事情是這樣的：

$(function() { 
    //all your code in here 
});

告訴jQuery的整個文件加載後只運行這段代碼。

來源

2013-08-07 10:55:20

HOORAY！非常感謝！ – milpool

如果（window.location.hash）事件只是部分執行

回答

相關問題