突出显示活动选项卡 - CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/403138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highlighting an active tab - CSS
提问by Ronnie
I have a small tabbed navigation setup using CSS. When hovering over the tabs the colour changes, great. However when i click a tab and it navigates to the corresponding page, i would like that tab (the active tab?) to remain highlighted, indicating the current page.
我有一个使用 CSS 的小型标签式导航设置。将鼠标悬停在选项卡上时，颜色会发生变化，太好了。但是，当我单击一个选项卡并导航到相应页面时，我希望该选项卡（活动选项卡？）保持突出显示，指示当前页面。
I am currently doing this by using a class (.currenttab ) and then using this class in each HTML file. I am not using:
我目前通过使用一个类 (.currenttab) 然后在每个 HTML 文件中使用这个类来做到这一点。我没有使用：
active
Is there a way for me to use active, rather than using a class in each individual HTML file, or is what i am doing correct?
有没有办法让我使用 active，而不是在每个单独的 HTML 文件中使用一个类，或者我在做什么正确？
Thank you in advance.
先感谢您。
回答by Eran Galperin
What you are doing is correct. The :activepseudo selector means something else - the event of activating a control (ie, the time between a user presses the mouse button and releases it).
你在做什么是正确的。的：有源伪选择器装置别的东西-激活的控制的情况下（即，用户之间的时间按下鼠标按键，并释放它）。
Using a class to signify the selected item is the way to go.
使用类来表示所选项目是要走的路。
回答by Justin Love
It's far from ideal, but if you give every page and every tab an id, you can define the highlighting in css instead of html. I ran across a full explanation while looking up the active attribute:
这远非理想，但如果你给每个页面和每个选项卡一个 id，你可以在 css 而不是 html 中定义突出显示。我在查找活动属性时遇到了完整的解释：
Highlighting Current Page With CSS
A site I designed with this technique(pages, not tabs)
我用这种技术设计的网站（页面，而不是标签）
回答by Kb.
Here are some more examples brainjar Demo
More from Brainjar
以下是更多示例Brainjar Demo
更多来自Brainjar
