JQuery / AJAX текущее состояние навигации по нажатию

Question

В настоящее время я работаю над созданием веб-сайта с помощью скрипта jquery / ajax, который динамически извлекает контент с другой страницы с эффектом затухания при нажатии на соответствующую вкладку в навигации. Нажмите здесь , чтобы просмотреть страницу и эффект (пока только первые две страницы - Home, Experience RGW).Вот учебник, которому я следовал для эффекта: Уловки CSS: Динамическая страница / Замена содержимого .Я смог заставить эффект перехода страницы работать нормально, но я потерял способность изменять активное состояние моей навигации.CSS и HTML верны;проблема заключается в переходе динамической страницы jquery / ajax.

Я использовал следующий скрипт php, чтобы найти имя документа и применить класс «on», если имя было истинным (иначе - страница активна) ... (до этого jquery работал нормально)переход страницы / ajax):

Для присвоения имени странице используется следующий код:

<?php $thisPage="home"; ?>

Этот код находит имя и применяет класс on:

<li<?php if ($thisPage=="home") 
    echo " class=\"on\""; ?> class="highlt">
    <a href="index.php" class="home"><span>Home</span></a>
</li>       

Это работало нормально до перехода на страницу jQuery / ajax, однако теперь, когда div навигации находится вне содержимого, которое динамически загружается для каждой страницы, я не знаю, как изменить текущее состояние навигации.Содержимое, которое динамически изменяется, находится внутри элемента «ajax» на странице (только для справки) ... и вы заметите, что раздел навигации («nav») находится за пределами этого.Вот почему он не меняется от страницы к странице.

Другая причина, по которой я думаю, что вызов php не работает, заключается в том, что он находится в заголовке страницы, и когда вы переходите на другую страницу и содержимое загружается (динамическивнутри div «ajax» не обновляет содержимое заголовка страницы.Таким образом, даже если я использую код, упомянутый выше, для присвоения названию определенной страницы и запуска изменения класса в навигации, он никогда не увидит его, потому что содержимое заголовка все еще из оригинального «index.php».Надеюсь, это имеет смысл.

Существует ли сценарий jQuery, который можно написать и запустить по нажатию вкладки навигации, чтобы удалить или добавить класс "вкл" (выбранное состояние)?Я уверен, что это можно сделать, но я новичок в jQuery.Я был бы очень признателен за любую помощь.Заранее спасибо.

Answer 1

Это опасная область, в которую вы попадаете. Если я вас правильно понимаю, вы хотите сделать глобальную навигацию в стиле Facebook, где сайт никогда не перезагружается.

Если это так, то проблема, с которой вы столкнулись сейчас, является лишь верхушкой айсберга. История браузера и закладки не будут работать должным образом, и вам, вероятно, придется написать исправления для разных браузеров.

Чтобы ответить на ваш вопрос, вы, вероятно, захотите использовать хештеги URL (например, index.php # page-contact), который загружает contact.php в ваш ajax div, а затем добавляет активный класс css на вкладку контактов. Если вы хотите смоделировать историю браузера, вам нужно использовать этот метод.

Если вас не волнуют юзабилити, доступность и другие важные темы, вы можете просто написать несколько строк jQuery, добавляющих класс к элементу, по которому щелкнули.

$(document).ready(function() {

$('#menu li').click(function(){

    $('#menu li').each(function(){
        $(this).removeClass('active'); 
    });

    $(this).addClass('active');
});

});

Answer 2

Просто измените атрибут window.location ... window.location += '#example' Вам потребуется добавить немного логики / регулярных выражений, чтобы удалить любой существующий хеш, прежде чем добавлять новый, но это должно быть довольно просто.