CSS3选项卡控件

Question

我发现这个很棒的教程，介绍如何使用CSS3在HTML中制作标签式菜单：http://www.sitepoint.com/css3-tabs-using-target-selector/

问题是，页面加载时似乎没有选择任何标签。在评论中有人说他有一个解决方案，甚至会显示一个演示：http://dabblet.com/gist/1892497

但我仍然不知道它是如何运作的。 o.O

我基本上有一些标签，如果没有选择它们就有一种背景颜色，另一种是活动标签的背景颜色。现在我需要第一个选项卡在页面加载时具有活动颜色...这对我不起作用。 ： - /

Answer 1

我认为关键是您需要在标签中添加指向标签ID的链接，并且您需要id="tab1"元素上的<section> ID。

（屏幕截图来自http://blogs.sitepointstatic.com/examples/tech/css3-target/tabs.html）

然后，您可以将用户关联到yourdomain.com/some-page#tab1，系统会选择第一个标签。

如果您出于审美原因而不想在网址中使用#tabX，则可以在页面加载后使用JavaScript将.tab选择的类添加到第一个标签页。

URL中的

#tabX与:target CSS选择器一起使用，以＃34;选择＆＃34;标签。