Html CSS3选项卡控件

我发现了这篇关于如何仅使用CSS3在HTML中创建选项卡式菜单的精彩教程：

问题是，页面加载时似乎没有选择任何选项卡。在评论中，有人说他有一个解决方案，甚至展示了一个演示：

但我还是不明白它是怎么工作的。o、 o

---

我基本上得到了一些标签，如果它们没有被选中，一个背景色为它们，另一个背景色为活动的一个。现在，我需要第一个选项卡在页面加载时使用活动颜色…这对我不起作用：-/

我认为关键在于，您需要在选项卡中有一个指向选项卡id的链接，并且在

元素上需要一个类似

id=“tab1”

的id

（截图来自）

然后，您可以将用户链接到

yourdomain.com/some页面#tab1

，并选择第一个选项卡

如果出于美观考虑，不希望URL中出现

#tabX

，则可以使用JavaScript在页面加载后将.tab选择的类添加到第一个选项卡中

---

URL中的

#tabX

与

：target

CSS选择器一起“选择”选项卡。

（注意和之间的区别）好吧，谢谢你的解释，但不幸的是你把我弄错了。我已经很清楚#tab1使选项卡处于活动状态，我也可以使用该URL。问题是，我没有建立一个网站，而是一个HTA应用程序，链接的路径也不一样，因为文件路径并不总是相同的。正如我已经说过的，有人已经找到了一个解决方案，在页面加载时突出显示一个标签，而不使用直接的URL，但我不理解他为它做CSS的方式…感谢你的评论，我再次查看了URL的事情。我已经尝试过用Javascript在加载时更改文档位置，但它似乎不起作用。现在我注意到是window.onload函数不起作用，而不是location.href=“#tab1”。弄清楚它现在能工作了！：-）在dabblet示例中，他们似乎没有使用

#tab1

，而且他们在页面加载时默认高亮显示特定选项卡，而不使用

#tab1

，但他们在切换选项卡时确实使用了该选项卡：（顺便说一句，我刚刚了解到使用Chrome可以在iframe中获得控制台，这在这种情况下非常方便：）