使用 href="#!/id" 进行导航答案

【问题标题】：Navigation using href="#!/id"使用 href="#!/id" 进行导航
【发布时间】：2013-12-24 19:07:26
【问题描述】：

最近我注意到一些网站的菜单导航有点像这样。

    <div id="navigation">
      <ul id="nav">
        <li><a href="#" class="selected"> HOME </a></li>
        <li><a href="#!/about"> ABOUT </a></li>
        <li><a href="#!/projects"> PROJECTS </a></li>
        <li><a href="#!/contact"> CONTACT </a></li>
      </ul>
    </div>

我还注意到这个 !/ 出现在带有动画效果的“单页”网站中。Example（请查看源代码中的导航）
我尝试使用它，但没有动画它似乎没用。
我的问题是，

<a href="#about"> ABOUT </a> 导航到当前页面中 id='about' 的部分。那么<a href="#!/about"> ABOUT </a> 是什么意思呢？
这是否与 jQuery 有关？还是特定于某些 jQuery 插件？
如果是，那我能这么说吗，它不是导航到任何地方，而只是帮助动画的“隐藏”（或假地址）？（我这样问是因为没有动画，它似乎没用)。

【问题讨论】：

在这里寻找答案。 stackoverflow.com/questions/4739667/…

标签： jquery html navigation

【解决方案1】：

hashbang 与动画没有任何关系（直接）。它提供了一个 URL，当您使用 Ajax 更改页面内容时，您可以链接到该 URL。然后，Google 可以将该 URL 翻译成与您网站上的 URL 相匹配的 URL，该 URL 将为 Google 提供可索引的内容。

该技术已被 the history api 淘汰，它允许您将 URL 更改为您网站上的普通。

使用普通 URL 意味着 progressive enhancement 可以工作，并且您不会遇到加载索引页面、将其显示给用户、然后在几秒钟后让 JavaScript 替换它的性能问题。

如果您想在加载新内容时制作动画，那么您可以。它只是与更改 URL 无关。

【讨论】：

就是这样。谢谢。