jQuery/ajax 当前导航状态点击答案

【问题标题】：jQuery/ajax current navigation state on-clickjQuery/ajax 当前导航状态点击
【发布时间】：2011-06-06 22:34:12
【问题描述】：

我目前正在开发一个带有 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 中（仅供参考）......您会注意到导航（“nav”）div 不在此范围内。这就是它在页面之间没有变化的原因。

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

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

【问题讨论】：

标签： jquery html css ajax

【解决方案1】：

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

【讨论】：

【解决方案2】：

这是您要进入的危险区域。如果我理解正确，您希望以 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');
});

});

【讨论】：