Question

我目前正在开发一个带有jquery / ajax脚本的网站，该脚本在点击导航中的相应选项卡时动态地从另一个页面中提取内容并具有淡入淡出效果。 Click here查看页面和效果（目前只有前两页有效 - 主页，体验RGW）。这是我关注效果的教程：CSS Tricks: Dynamic Page / Replacing Content。我能够使页面转换效果正常工作，但我已经失去了更改导航活动状态的能力。 css和html是正确的;问题在于jquery / ajax动态页面转换。

我使用以下php脚本来查找文档的名称，如果名称为true（也就是 - 页面处于活动状态），则应用类“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”div中（仅限FYI）...您会注意到导航（“nav”）div不在其中。这就是它在页面之间保持不变的原因。

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

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

Answer 1

只需修改window.location属性... window.location += '#example'在添加新哈希之前，您必须添加一些逻辑/正则表达式来删除任何现有哈希值，但这应该非常简单。 / p>

Answer 2

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

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

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

如果您不关心可用性，可访问性和其他必要主题，您可以编写几行jQuery，将该类添加到单击的元素中。

$(document).ready(function() {

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

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

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

});

点击jQuery / ajax当前导航状态

2 个答案: