1

ハッシュタグを使用して、ナビゲーションバーの をクリックしても表示される 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 に答える