1

我有一个主页“index.html”。这个主页是网站的入口，它是用 HTML5 完成的。该网站还有其他页面：

“about.html”、“work.html”、“portfolio.html”、“contact.html”

所以所有这些页面都有一个名为“contentDiv”的div，它有相应的副本/文本。用户通过“index.html”进入网站，如果用户点击以下导航链接之一：

关于 | 工作 | 投资组合 | 接触

“index.html”页面使用 JQuery 的 load() 调用加载点击页面的“contentDiv”的内容，然后使用动画在加载的 div 中滑动。

站点是向后兼容的，因此如果禁用 Javascript，则用户将被带到点击的页面，而不是让“index.html”通过 load() 调用加载内容。

顺便说一句，导航链接的编码如下：

<a href="about.html" title='About'>About</a>

一旦“index.html”加载了请求的内容，通过使用 pushState()，URL 就会更新。因此，如果用户单击“关于”链接，则 pushState() 会将 URL 更新为：

“http://www.abc.com/about.html”

我没有在 href 标签中插入任何哈希的原因是，我希望网站有一个后备，以防万一 Javascript 被禁用。这样，用户可以被引导到请求的页面（'about.html'）而不是“index.html”。

到目前为止，一切都按预期运行，但问题就在这里。当用户在“index.html”上并单击任何部分（例如“about.html”）时，将加载内容并通过 pushState() 更新 URL。所以现在 URL 是“http://www.abc.com/about.html”。现在，如果用户刷新页面（“index.html”），加载“about.html”而不是“index.html”执行 load() 调用。

假设我像这样编写导航 href 标签：

<a href="#about" title="about">About</a>

然后 URL 最终会在其中包含一个哈希值。如果我将链接“http://www.abc.com/#about”复制并通过电子邮件发送给用户，并且如果用户尝试通过禁用 javascript 的浏览器打开链接，则用户将无法访问“关于.html”，因为链接只有“#about”而不是“about.html”。

我正在尝试做的确实是可行的，我只是不知道如何处理它。如果有人能在这方面帮助我，那就太好了。

原谅我，这么长的描述。

谢谢你。

4

2 回答 2

1

我最终将所有导航 href 设置为“”。然后在 document.ready() 函数上设置 hrefs 值。

$('a[rel=nav]').attr('href', '');

谢谢。

于 2012-08-26T20:57:51.210 回答
0

此代码将实现您需要做的事情并支持禁用 javascript 的用户。

$('a').click(function() {
  window.location.hash = $(this).attr('src');
  return false;
}

如果您单击关于链接，您的网址将类似于http://www.yoursite.com/#about.html ，并且在您刷新时它们会起作用。如果您想了解有关制作 ajax 网站的更多信息，我建议您访问此博客Css-Tricks.com

于 2012-08-17T03:29:59.490 回答