html - 如何在 SPA 中设计在页面刷新时保留的选项卡？

Question

tl;博士

SPA 中是否有公认的正确设计选项卡区域，在刷新页面时保持选项卡选择？

---

搜索“单页应用程序 css选项卡”时，仅找到 7 个结果，其中只有一个似乎相关；然而，这个功能只有一个自我回答，没有评论，所以我发现那里提出的解决方案的可靠性有点可疑。

当我问这个问题时，我拥有一个选项卡区域的方法是在其中包含一个包含与选项卡一样多<nav>的选项卡，每个选项卡都有一个, 让用户选择选项卡，然后是一个目标造型目的。<ul><li><input type="radio" ...><label>

我在网上看到的另一个解决方案是让<li>上面的解决方案中的每个选项卡都包含 a <a href="#id-of-the-tab">。关于这个解决方案，我不明白如何默认选择一个选项卡，但我接受的答案#href-of-the-link-to-the-selected-tab解释了如何做到这一点，提出了一种解决方案，该解决方案对在 URL的尾随中选择哪个选项卡的信息进行编码。另一方面，它表明我实际上并没有使用该解决方案，而是尝试使用“选项卡模式”或“SPA 模式”，建议将此链接作为可能的参考。

关键是上面的链接给出了一个解决方案，其中选择哪个选项卡的信息没有编码在URL中，因此在刷新页面时会丢失选项卡区域的状态（选择了哪个选项卡）。

因此，我进行了更多搜索以了解各种解决方案的优缺点，最重要的是，了解是否存在公认的在 SPA 中制作标签的最佳方法。

我在 css-tricks 上找到了一篇（相当旧，从 2010 年开始，于 2015 年更新）的帖子，作为对我上面提到的另一个问题的回答，它也使用了<a href="#id-of-tab">s 和相应<div id="id-of-tab">的 s 以及:target选择器。

此页面提出了类似的（如果不相同的话）解决方案。

让我更加困惑的是，GitHub 个人资料页面（如我的）在 URL 中使用尾随编码的选项卡?tab=repositories，但技术似乎与上面相同：每个选项卡都有一个<a>in a <nav>（并且<a>s 甚至没有包裹在<li>s-in- <ul>，我知道这对屏幕阅读器没有帮助），但每个<a>都有一个href="?tab=tab-id-or-something"而不是href="#id-of-the-tab".

标签： htmlcsstabssingle-page-applicationwai-aria