jQuery/ajax当前导航状态点击

问题描述：

我目前正在开发一个带有jquery/ajax脚本的网站，该脚本通过单击导航中相应的选项卡动态地从具有淡入淡出效果的另一个页面中拉出内容。 Click here查看页面和效果（现在只有前两页 - 首页，体验RGW）。以下是我效仿的教程：CSS Tricks: Dynamic Page/Replacing Content。我能够使页面转换效果正常工作，但我失去了改变导航活动状态的能力。 CSS和HTML是正确的;问题在于jquery/ajax动态页面转换。jQuery/ajax当前导航状态点击

我正在使用下面的PHP脚本来查找文档的名称，并将该类应用于“如果名称为真”（又名 - 该页面处于活动状态）...（它在此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内（仅供参考）......并且您会注意到导航（“nav”）div不在此范围内。这就是页面间不变的原因。

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

是否有一个jQuery脚本，可以编写和触发的导航选项卡上点击删除或添加类“on”（选定状态）？我确信它可以完成，但我是一个jQuery新手。我非常感谢任何帮助。先谢谢你。

答

只需修改window.location属性... window.location += '#example'在添加新的哈希之前，您必须添加一点逻辑/正则表达式来删除任何现有的哈希，但这应该很容易。

答

这是一个危险的区域，你正在进入。如果我理解正确，那么您希望以Facebook风格进行全球导航，网站永不重新加载。

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

要回答你的问题，你可能想要使用在你的ajax div中加载contact.php的URL标签（如index.php＃page-contact），然后将活动的css类添加到联系人选项卡。如果您想要模拟浏览器历史记录，则需要使用此方法。

如果您不关心可用性，可访问性和其他重要主题，那么您只需写几行jQuery即可将该类添加到clicked元素中。

$(document).ready(function() { 

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

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

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

});

jQuery/ajax当前导航状态点击

相关推荐