【问题标题】: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。

    (截图来自http://blogs.sitepointstatic.com/examples/tech/css3-target/tabs.html

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

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

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

    【讨论】:

    • 嗯,谢谢你的解释,但很遗憾你弄错了。 #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/…