在DIV类/ ID上使用Visibility的一个文件站点设计

Question

我正在构建一个单页（一个文件）网站，并希望了解我是否采用最实用和最智能的方法。该网站是一个平面设计师的简单网站。它有4个“页面”，分别是“关于我”，“联系人”，“工作”和“照片”。我想要做的是有4个div（绝对放在同一个地方），一次只能看到一个。当您单击任何链接时，它会关闭其他链接的可见性以及单击的链接。我有几种方法可以做到这一点：

• 我应该使用Visibility来显示/隐藏图层吗？
• 我应该使用Z-Index显示/隐藏图层吗？
• jQuery是处理此问题的最佳方法吗？
• 使用.visible .hidden等类是循环显示/隐藏div的最佳方法吗？
• 为达到最高效率而做到这一点的任何其他提示？

我知道有些人会告诉我只使用单独的页面，但网站很简单，缩略图，大部分大小都在标题和jQuery脚本中。缩略图相当小，如果不需要，我没有看到使网站有多个页面的意义。

感谢您的任何见解。

Answer 1

正如Pekka所指出的，可能存在反对将其作为单个文件站点的论点。但我会假设你有一个引人注目的用例。回答这个问题：

我会这样做：

• 使用四个div。
• 无需绝对定位它们，只需将它们一个接一个地放置。
• 为每个div提供一个带有语义名称的独特ID（例如，“about”，“contact”等）。
• 最初不要隐藏任何，只是让它们一个接一个地展示。现在，没有Javascript的人可以使用该页面，它对搜索引擎来说效果很好。
• 在页面加载时，使用Javascript隐藏除要显示的内容之外的所有内容。
• 通过查看位置中的锚点来确定要显示哪一个，例如“#about”表示您要显示about div，“＃contact”表示您要显示联系页面。
• 当您从一个更改为另一个时，请更改锚点以匹配。现在该网站是可收藏的/可链接的。
• 考虑使用历史插件来管理锚点，这样您就可以获得前进和后退支持，而不会在所有浏览器不一致的情况下彻底撕掉头发。 ： - ）

Answer 2

不是你问题的答案，但有充分的理由反对这种方法。

• 最重要的是，它无法在JavaScript关闭时使用。对于没有JavaScript的人来说，它将完全无法使用。这对我来说绝对是禁忌。

• 无法链接到特定页面

• 这是一场搜索引擎优化的噩梦 - 在一个4页的网站中可能并不重要，但仍然值得一提

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

Answer 3

如果您使用的是jQuery，只需根据需要调用.show()和.hide()来切换这些部分。

然而，正如@Pekka所指出的，最好将这些作为单独的页面保留。

Answer 4

我认为使用Jquery将是实现此效果的最佳方式。 Pekka提到它对于关闭javascript的用户不起作用，但真的 - 这些天有多少人禁用了javascript？几乎每个你访问的网站都依赖于javascript。

在我看来，使用jquery获取标签的最佳方法是使用由Nettuts编辑器Jeffrey Way开发的插件。他的插件所在的个人网站正在建设中，但我刚刚下载了它。这是一个带有必要文件的zip文件的链接。

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

JW-Tabs

希望这有帮助。