Currently, I'm working on a website project where I am using a jquery/ajax script to dynamically pull in content from another page with a fade effect when clicking on a tab in the navigation menu. You can check out the effect on the page here. Only the Home and Experience RGW pages are live at the moment. For this project, I followed a tutorial from CSS Tricks called Dynamic Page / Replacing Content.
Initially, everything was going smoothly with the page transition effect. However, I encountered an issue with changing the active state of my navigation once I introduced the jquery/ajax dynamic page transition.
Prior to this transition, I used a PHP script to determine the current document name and apply the "on" class if it matched. Here is the code snippet for naming the page:
<?php $thisPage="home"; ?>
The following code then finds the name and applies the "on" class to the corresponding navigation item:
<li<?php if ($thisPage=="home")
echo " class=\"on\""; ?> class="highlt">
<a href="index.php" class="home"><span>Home</span></a>
</li>
After implementing the jquery/ajax dynamic page transition, I realized that since the navigation div was outside of the content loading dynamically for each page (within the "ajax" div), the current navigation state didn't change as expected.
One challenge I faced was that the PHP call to set the current page name was in the header section, which did not refresh when navigating between pages with content loading within the "ajax" div. This resulted in the navigation always reflecting the original index.php state.
I believe a jQuery script triggered on-click of the navigation tab could solve this issue by adding or removing the "on" class for the selected state. While I am still relatively new to jQuery, any guidance on creating such a script would be greatly appreciated. Thank you in advance for your help!