Question

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

    <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插件？
如果是，那么我可以这么说，它不是导航到任何地方，而只是一个“隐藏”（或假地址）来帮助动画吗？（我问这样是因为没有动画，它似乎没用）。

Answer 1

hashbang没有（直接）与动画有关。当您使用Ajax更改页面内容时，可以提供链接到的URL。然后，Google可以将该网址转换为点击您网站上可为Google提供可转换内容的网址的网址。

该技术已被the history api淘汰，您可以将网址更改为您网站上的普通网址。

使用普通URL意味着progressive enhancement有效，并且您没有加载索引页面，将其显示给用户，然后几秒钟后让JavaScript替换它的性能问题。

如果你想在加载新内容时做动画，那么你可以。它与URL更改没有任何关系。

使用href =“＃！/ id”导航

1 个答案: