CSS3 选项卡控件答案

【问题标题】：CSS3 Tab ControlCSS3 选项卡控件
【发布时间】：2025-12-19 15:40:12
【问题描述】：

我发现了这个关于如何在 HTML 中仅使用 CSS3 制作选项卡式菜单的精彩教程：http://www.sitepoint.com/css3-tabs-using-target-selector/

问题是，在页面加载时似乎没有选择任何选项卡。在 cmets 中，有人说他对此有解决方案，甚至还展示了一个演示：http://dabblet.com/gist/1892497

但我仍然不明白它是如何工作的。 o.O

我基本上得到了一些选项卡，如果它们没有被选中，则为它们提供一种背景颜色，为活动选项提供另一种背景颜色。现在我需要第一个选项卡在页面加载时具有活动颜色...这对我不起作用。 :-/

【问题讨论】：

标签： html css tabs

【解决方案1】：

我认为关键是您需要在选项卡中具有指向选项卡 ID 的链接，并且您需要在 <section> 元素上具有类似 id="tab1" 的 ID。

然后您可以将您的用户链接到yourdomain.com/some-page#tab1，然后将选择第一个选项卡。

如果出于美观原因您不想在 URL 中出现 #tabX，您可以使用 JavaScript 在页面加载后将 .tab-selected 类添加到第一个选项卡。

URL 中的#tabX 与:target CSS 选择器一起“选择”选项卡。

【讨论】：

（注意blogs.sitepointstatic.com/examples/tech/css3-target/tabs.html和blogs.sitepointstatic.com/examples/tech/css3-target/…的区别）
嗯，谢谢你的解释，但很遗憾你弄错了。 #tab1 使选项卡处于活动状态对我来说已经很清楚了，我也可以使用该 URL。问题是我没有建立一个网站而是一个 HTA 应用程序，因此链接不会相同，因为文件路径不会总是相同。正如我已经说过的那样，有人已经找到了一个解决方案，可以在页面加载时突出显示一个选项卡，而不使用指向它的直接 URL，但我不明白他为它做 CSS 的方式......
感谢您的评论，我再次查看了 URL。我已经尝试使用 Javascript 更改文档位置 onload，但它似乎不起作用。现在我注意到它是 window.onload 函数不起作用，而不是 location.href = "#tab1"。弄清楚它现在有效！ :-)
在 dabblet 示例中，他们似乎没有使用#tab1，并且在页面加载时默认情况下他们会在不使用#tab1 的情况下突出显示特定选项卡，但他们确实在切换时使用它标签：screencast.com/t/gfvbQzB0jDa（顺便说一句，我刚刚了解到您可以使用 Chrome 在 iframe 中获取控制台，这在这种情况下很方便：*.com/questions/7961229/…）