Устранение неполадок Ajax, нужна помощь

Question

Я пытаюсь создать ajax с моим сайтом, нажмите на навигацию, и страница перейдет на другую страницу. Я читаю этот урок , и он работает! За исключением некоторых вещей, которые мне не нравятся. У меня есть пара вопросов ..

В URL это странно; Если я нажму на дом, он перейдет к example.tld/home#, но я бы хотел иметь хеш-код на обратной стороне. example.tld/#home. Если бы я перешел на страницу контактов, она отобразилась бы как /home#co… не показывает всего слова. (Контакт). Я бы хотел #contact заменить #home при смене страницы. Кроме того, как я могу попасть на другую страницу при загрузке вместо #home снова? Пример: нажмите на example.tld/#contact, перейдите на страницу #contact.

Допустим, я нахожусь на #home, и если я снова нажму на ссылку #home, она перезагрузит ту же страницу, есть ли способ остановить это, если я уже на этой странице?

Хорошо, еще один вопрос ... Страница постепенно исчезает, это крутой эффект, но исчезновение из угла довольно уродливо, есть ли способ, при котором я могу вставлять и выдвигать контент, когда это необходимо? Я пытался slideUp() до загрузки другой страницы, это именно то, что я хочу (это работало), но я не могу заставить его скользить вниз, когда появляется контент.

Прошу прощения за столько вопросов, я честно пытался последние два дня получить то, что хотел, но то, что я пытаюсь сделать, не получается! Спасибо всем, кто ответит на мои вопросы!

Вот код, который я изменил из учебника :

 // Check for hash value in URL  
    var hash = window.location.hash.substr(1);  
    var href = $('nav ul li a').each(function(){  
        var href = $(this).attr('href');  
        if(hash==href.substr(0,href.length-5)){  
            var toLoad = hash+'.html #main-content';  
            $('#content').load(toLoad)  
        }  
    });  

    $('nav ul li a').click(function(){  

    var toLoad = $(this).attr('href')+' #main-content';  
    $('#main-content').hide('fast',loadContent);  
    $('#load').remove();  
    $('#wrapper').append('<span id="load">LOADING...</span>');  
    $('#load').fadeIn('normal');  
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);  
    function loadContent() {  
        $('#main-content').load(toLoad,'',showNewContent())  
    }  
    function showNewContent() {  
        $('#main-content').show('normal',hideLoader());  
    }  
    function hideLoader() {  
        $('#load').fadeOut('normal');  
    }  
    return false;  

    });

Думаешь, мне следует кэшировать некоторые повторяющиеся селекторы?

Также вот HTML:

<div id="main-content" class="home">

… content to be loaded

</div>

Nav:

<nav>
        <ul>
          <li><a href="home">Home</a></li>
          <li><a href="about">About</a></li>
          <li><a href="contact">Contact</a></li>
        </ul>
      </nav>

Я использую htaccess, поэтому мне не нужно включать расширение файла, но при необходимости файлы .php

Answer 1

Чтобы переместить хеш обратно, вам нужно изменить, где сервер фактически обслуживает HTML-файл. В настоящее время, если я правильно понимаю, ваш файл обслуживается как /home, и к нему добавляются хэши. Вам нужно изменить структуру файла (или .htaccess), чтобы обеспечить доступ к странице в качестве индекса каталога (/, возможно index.html или index.php).

Блок кода в верхней части предназначен для проверки текущего хэша и загрузки соответствующего содержимого при первой загрузке, но он пытается перебрать элементы, которые не существуют! Когда этот код выполняется, DOM не обязательно загружается, и в его $('nav ul li a').each... он не находит никаких ссылок. Вы можете исправить это, обернув весь первый блок кода в jQuery document-ready-event-helper!

$(function () {
    //In here, the DOM is loaded! Hurrah!
});

(см. http://api.jquery.com/jQuery#jQuery3)

Чтобы предотвратить перезагрузку текущей страницы, вам нужно сделать простую проверку в начале вашего обработчика кликов. Что-то вроде

var goingTo = $(this).attr('href');
goingTo = goingTo.substring(0, goingTo.length - 5);
if (window.location.hash.substring(1) === goingTo) return false;

Чтобы изменить переходы, все, что вам нужно сделать, это изменить fadeIn s и fadeOut s на slideDown s и slideUp s!

Надеюсь, это поможет!

Answer 2

Это может это исправить:

$('nav ul li a').click(function(event){ 
    ...

    event.preventDefault();
    return false;
}