使用DIV类/ID的可见性进行一个文件站点设计

正如pekka所指出的,可能有人反对将其作为单个文件站点进行。但我假设您有一个引人注目的用例。回答问题:

我会这样处理:

• 使用四个div。
• 不需要完全定位它们,只需要把它们一个接一个地放好。
• 给每个DIV一个具有语义名称的不同ID(例如“about”、“contact”等)。
• 不要隐藏 任何 开始的时候,让他们一个接一个的出现。现在这个页面可以被没有javascript的人使用,对于搜索引擎来说,它工作得很好。
• 在页面加载时,使用javascript隐藏除要显示的以外的所有内容。
• 通过查看位置中的锚来确定要显示哪个锚,例如,“关于”表示要显示“关于”DIV,“联系人”表示要显示“联系人”页。
• 当您从一个更改为另一个时,请更改锚以匹配。现在该网站可以进行书签/链接。
• 考虑使用一个历史插件来管理锚,这样您就可以获得前后支持,而不必因为浏览器的所有不一致而彻底破坏您的头发。-)

不是你的问题的答案,但是有令人信服的理由反对这种方法。

• 最重要的是,它不能在关闭javascript的情况下工作。对于没有javascript的人来说,它将完全不可用。这对我来说绝对不是。

• 这样就不可能链接到特定的页面

• 这是一个SEO噩梦-也许在一个4页的网站上没有那么重要,但仍然值得一提

• 维护变得更加困难,因为有四个或更多复杂的页面结构融合为一个

如果使用jquery,只需调用 .show() 和 .hide() 根据需要切换各部分。

不过,正如@pekka所指出的,最好将其作为单独的页面保留。

我认为使用jquery是实现这种效果的最好方法。Pekka提到,对于那些关闭了javascript的用户来说,它是不起作用的,但是现在到底有多少人禁用了javascript?几乎你要访问的每个网站都依赖于javascript。

在我看来,使用jquery获取选项卡的最佳方法是使用nettus编辑器jeffrey way开发的插件。插件所在的个人网站目前正在建设中,但我不久前下载了它。这里有一个链接,指向一个包含必要文件的zip文件。

请注意,我已经大大简化了他的版本。这意味着我删除了很多样式,但这不应该是个问题,因为您可能会想要自己独特的样式。

JW-Tabs

希望这有帮助。