Question

我正在尝试使用主题标签来显示通过单击导航栏中显示的div。（我使用jquery而不是页面的链接，我希望它们可以直接链接。）

由于某种原因，它只会导致.click功能的部分发生！ ???

这是我的剧本（我很新，我敢肯定这是非常不优雅的，但它已经完成了工作）

//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();
}

因此，当我重新加载哈希页面时，背景会正常淡出并且类正确切换，但div（例如，＃bookswrap，＃books）不会淡入。

有什么想法吗？我想这是愚蠢的，因为我对这一切都是新手。

Answer 1

这是在页面顶部还是底部？我的猜测是前几行未运行，因为页面尚未完全加载，race condition，但是较低的行正在运行，因为jQuery将它放在其内部事件队列中，因此它们实际上在几毫秒后运行。如果是这样的话，只需将这整件包装成这样的东西：

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

这告诉jQuery只在整个文件加载后运行此代码。

if（window.location.hash）事件仅部分执行

1 个答案: