突出显示活动选项卡 - CSS答案

【问题标题】：Highlighting an active tab - CSS突出显示活动选项卡 - CSS
【发布时间】：2008-12-31 14:55:16
【问题描述】：

我有一个使用 CSS 的小型选项卡式导航设置。将鼠标悬停在选项卡上时，颜色会发生变化，很棒。但是，当我单击一个选项卡并导航到相应页面时，我希望该选项卡（活动选项卡？）保持突出显示，指示当前页面。

我目前正在通过使用一个类 (.currenttab ) 然后在每个 HTML 文件中使用这个类来执行此操作。我没有使用：

active

有没有办法让我使用 active，而不是在每个单独的 HTML 文件中使用一个类，或者我所做的是否正确？

提前谢谢你。

【问题讨论】：

您的问题并没有完全清楚，所以以防万一，请确保将任何 css 类放在单独的 .css 文件中，然后将其包含在每个 html 页面中，这样您就不会重新定义类。
对不起，我不太明白你的意思。我目前对包括 .currenttab 类在内的所有内容都有一个样式表。然后，在每个 HTML 文件中，我将类分配给相应的列表项（导航项）。这是不正确的吗？

【解决方案1】：

你所做的是正确的。 :active 伪选择器还有其他含义 - 激活控件的事件（即，用户按下鼠标按钮和释放鼠标按钮之间的时间）。

使用类来表示选定的项目是要走的路。

【讨论】：

【解决方案2】：

这远非理想，但如果你给每个页面和每个选项卡一个 id，你可以在 css 而不是 html 中定义突出显示。我在查找 active 属性时遇到了完整的解释：

【讨论】：

无需对 id 感到非常沉重，类就足够了，但这种方法将为您带来最大的收益。当您开始转向更高级的 HTML/css 时，将类添加到 body 标记将是一种更好的做法。

【解决方案3】：

这里有更多示例brainjar Demo
更多来自Brainjar

【讨论】：