系统处理选项卡内容的哈希标签？ (!#)
我正在开发的网站的主要部分有四个页面，并带有用于在它们之间切换的选项卡。我希望 4 个选项卡之间的切换是淡入淡出的过渡（使用 jQuery）。这一切都很好，但我也希望 SEO 将每个页面视为一个单独的页面。我还希望能够链接到 URL 并让它提取正确的内容，即使从技术上讲它是同一页面。
Facebook 就是这么做的（facebook.com/#!/another-string-here），你可以在图片等之间切换，所以它有点像 JavaScript 查询字符串。
这允许立即切换，能够链接到它，但每个页面都充当自己的页面。
有推荐的方法来执行此操作吗？
更新我发现的最好的是 SammyJS ——尚未实现，但它看起来是最好的答案： http://sammyjs.org/
I have four pages on the main part of the website I am working on, with tabs to switch between them. I want the switching between the 4 tabs to be a fading transition (using jQuery). That's all fine and dandy, but I also want SEO to think of each as a separate page. I also want to be able to link to a URL and for it to pull up the right content, even though it is technically the same page.
Facebook does this (facebook.com/#!/another-string-here), and you can switch between pictures and so on, so it kind of acts as a javascript querystring.
This allows switching immediately, the ability to link to it, and yet each acts as its own page.
Is there a recommended method for how to do this?
UPDATE the best I've found is SammyJS -- haven't implemented but it looks to be the best answer:
http://sammyjs.org/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
假设您有一个名为
services的基本页面，该页面有两个选项卡：design和development（只是为了简化）。因此，如果您的域名是example.com，则单击“Design”选项卡后的哈希 URL 将类似于http://example.com/services#!/design，以及类似的开发。我假设你知道该怎么做。为了让搜索引擎识别标签，您要做的就是为每个页面制作一个静态版本。因此，您可以在
http://example.com/services/design上找到一个，在http://example.com/services/development上找到一个。每个选项卡的href属性实际上会指向这些静态页面，但您可以将 onclick 处理程序附加到每个选项卡以使其转到哈希版本。这样，启用 JavaScript 的客户端将获得带有哈希标签和淡入淡出效果的页面的 Ajaxy 版本，而未启用 JavaScript 的客户端（包括网络爬虫）将看到正常的静态链接，这样每个人都会获胜。
根据记录，这与 Facebook 的做法类似。他们更进一步，使用 HTML5 的新
历史记录。 PushState()函数在支持它的浏览器中，以便完全消除对哈希标签的需要。 （有关详细信息，请参阅此问题。）Let's say you have a base page, called
services, and that page has two tabs:designanddevelopment(just for simplification). So if your domain wasexample.com, your hash URL upon clicking on the "Design" tab would look something likehttp://example.com/services#!/design, and similar for development. I'm assuming you know how to do that.To make search engines recognize the tabs, what you do is make a static version of each page. So you'd have one at
http://example.com/services/designand one athttp://example.com/services/development. Thehrefattribute of each tab would actually point to these static pages, but you would attach an onclick handler to each tab to make it go to the hash version.This way, JavaScript-enabled clients would get the Ajaxy version of your page with the hash tags and the fading effects, while clients without JavaScript enabled (including web crawlers) would see normal, static links, and everybody wins.
For the record, this is similar to what Facebook does. They go a step further and use HTML5's new
history.pushState()function in browsers that support it, in order to remove the need for the hash tag entirely. (See this question for more info.)好吧，同时拥有这两种方式是不可能的（facebook 方法和 SEO），因为服务器不会发送哈希标签，并且大多数搜索引擎（谷歌等）不运行 javascript。
现在如果你只是想要淡入淡出的效果，你可以这样设置，如果url中有hash标签，例如
#fade，jquery会将不透明度设置为0，等待加载并淡入。要淡出，您可以在链接上设置事件侦听器，e.preventDefault()或在该函数中return false，然后淡出不透明度。淡入淡出后，您将使用 javascript 将 javascript 更改为带有哈希值#fade的新页面location.href="site"编辑：示例：http://fiddle.jshell.net/msm595/u5Eg2/3/show/light/
Well to have it both ways is impossible (facebook method and SEO), because the server doesn't get sent the hash tag, and most search engines (google etc.) don't run javascript.
Now if you simply want the fading effect, you can set it up so that if there is a hash tag in the url, for example
#fade, jquery will set the opacity to 0, wait for load and fade in. To get the fade out you set event listeners on the links,e.preventDefault()orreturn falsein that function, and fade out the opacity. Once it is done fading you would have javascript change to a new pagelocation.href="site"with the hash#fadeEdit: example: http://fiddle.jshell.net/msm595/u5Eg2/3/show/light/