javascript - 使用 DIV 类/ID 上的可见性的一个文件站点设计

Question

我正在构建一个单页(一个文件)站点，并且想深入了解我是否采用了最实用和最智能的方法。该站点是平面设计师的简单站点。它有4个“页面”，分别是“关于我”、“联系方式”、“工作”和“照片”。我想要做的是有 4 个 div(绝对放在同一个地方)，一次只有一个可见。当您单击任何链接时，它会关闭其他链接的可见性并打开单击的链接。不过，我有几种方法可以做到这一点:

• 我应该使用可见性来显示/隐藏图层吗？
• 我应该使用 Z-Index 来显示/隐藏图层吗？
• jQuery 是处理这个问题的最佳方式吗？
• 使用 .visible .hidden 等类是否是循环显示/隐藏哪些 div 的最佳方式？
• 执行此操作以获得最高效率的任何其他提示？

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

感谢任何见解。

Answer 1

正如 Pekka 指出的那样，可能有人反对将其作为单文件站点来做。但我假设您有一个引人注目的用例。回答问题:

我会这样处理:

• 使用四个 div。
• 不需要绝对定位，一个接一个放就行。
• 为每个 div 指定一个具有语义名称(例如，“关于”、“联系人”等)的独特 ID。
• 一开始不要隐藏它们中的任何，让它们一个接一个地显示出来。现在，无需 Javascript 的人也可以使用该页面，而且对于搜索引擎来说效果很好。
• 在页面加载时，使用 Javascript 隐藏除您想显示的内容之外的所有内容。
• 通过查看位置中的 anchor 来确定要显示哪个，例如，“#about”表示您要显示关于 div，“#contact”表示您要显示联系人页面。
• 当您从一个更改为另一个时，更改 anchor 以匹配。现在该站点可添加书签/可链接。
• 考虑使用历史插件来管理 anchor ，这样您就可以获得前向和后向支持，而不会因所有浏览器的不一致而大吃一惊。 :-)