1

我正在尝试使用主题标签来显示 div，这些 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）不会淡入。

有任何想法吗？我想这很愚蠢，因为我对这一切都不熟悉。

4

1 回答 1

1

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

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

它告诉 jQuery 仅在整个文件加载后才运行此代码。

于 2013-08-07T10:55:20.580 回答