If (window.location.hash) событие, выполняемое частично

Я пытаюсь использовать hashtags для отображения divs, которые также отображаются щелчком на панели навигации. (Я использую 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) не исчезают.

Есть идеи? Я представляю себе что-то немым, потому что я новичок во всем этом.

1 ответ

Это в верхней части страницы или внизу? Я предполагаю, что первые несколько строк не работают, потому что страница еще не полностью загружена, условие гонки, но нижние строки запущены, потому что jQuery помещает это в свою внутреннюю очередь событий, чтобы они фактически запускали несколько миллисекунд позже. Если это так, просто оберните все это примерно так:

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

Что говорит jQuery только запустить этот код после загрузки всего файла.

licensed under cc by-sa 3.0 with attribution.