jQuery/ajax单击时的当前导航状态

jQuery/ajax单击时的当前导航状态,jquery,html,css,ajax,Jquery,Html,Css,Ajax,我目前正在开发一个带有jquery/ajax脚本的网站,该脚本可以在单击导航栏中相应的选项卡时动态地从另一个页面中提取内容,并产生淡入淡出效果。要查看页面和效果,现在只有前两个页面可用-主页,体验RGW。以下是我遵循的效果教程:。我能够让页面转换效果正常工作,但我已经失去了更改导航活动状态的能力。css和html是正确的;问题在于jquery/ajax动态页面转换 我使用以下php脚本查找文档的名称,并在名称为true时应用该类-页面处于活动状态…在jquery/ajax页面转换之前工作正常:

我目前正在开发一个带有jquery/ajax脚本的网站,该脚本可以在单击导航栏中相应的选项卡时动态地从另一个页面中提取内容,并产生淡入淡出效果。要查看页面和效果,现在只有前两个页面可用-主页,体验RGW。以下是我遵循的效果教程:。我能够让页面转换效果正常工作,但我已经失去了更改导航活动状态的能力。css和html是正确的;问题在于jquery/ajax动态页面转换

我使用以下php脚本查找文档的名称,并在名称为true时应用该类-页面处于活动状态…在jquery/ajax页面转换之前工作正常:

以下代码用于命名页面:

<?php $thisPage="home"; ?>
此代码查找名称并应用于类:

<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 div中仅供参考。。。你会注意到导航导航div在这个范围之外。这就是为什么每页都保持不变的原因

我认为php调用不起作用的另一个原因是,它位于页面的标题中,当您导航到另一个页面并在ajax div中动态加载内容时,它不会刷新页面的标题内容。因此,即使我使用上面引用的代码命名某个页面并触发导航中类的更改,它也不会看到它,因为标题内容仍然来自原始index.php。我希望这是有道理的


是否有一个jQuery脚本可以在单击导航选项卡时编写和触发,以删除或添加处于选定状态的类?我相信这是可以做到的,但我是jQuery的新手。我非常感谢您的帮助。提前谢谢。

只需修改window.location属性。。。window.location+=“example”在添加新的哈希之前,您必须添加一点logic/regex来删除任何现有的哈希,但这应该非常简单。

这是一个危险的领域。如果我没弄错的话,你想用Facebook的方式进行全球导航,网站永远不会重新加载

如果是这样,你现在遇到的问题只是冰山一角。浏览器历史记录和书签无法按预期工作,您可能需要为不同的浏览器编写修复程序

要回答您的问题,您可能需要使用URL哈希标记,如index.phppage-contact,它在ajax div中加载contact.php,然后将活动css类添加到contact选项卡。如果需要模拟浏览器历史记录,则需要使用此方法

如果您不关心可用性、可访问性和其他基本主题,那么只需编写几行jQuery就可以将类添加到单击的元素中

$(document).ready(function() {

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

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

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

});