HTML/CSS 导航活动状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25189536/
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
HTML/CSS Navigation active state
提问by user3919507
I'm new to HTMLand CSSand I just finished implementing my Navigation Bar which works great so far. It is black and on hovering over the fields they turn grey.
我是新来的HTML和CSS我刚刚完成我的实现导航栏伟大的工程至今。它是黑色的，悬停在田野上时，它们会变成灰色。
Now, I'm trying to implement that the field of the active page stays in that grey but it isn't working for me so far and I believe it's because of the HTML. On index.html nothing should be activated as I wont be using that page later. It's just the standard side.
For Example then I have Home.html, Contact.html and Forum.hmtl.
现在，我正在尝试实现活动页面的字段保持灰色，但到目前为止它对我不起作用，我相信这是因为HTML. 在 index.html 上不应激活任何内容，因为我以后不会使用该页面。这只是标准的一面。例如，我有 Home.html、Contact.html 和 Forum.hmtl。
If I open Index.html in my browser and in my Navbar click on Home I will be navigated to the at the moment exact same page like Index.html, but on this page i want the home navfield to be highlighted. Do I have to (in the Home.html) state that this field is active? How do I do that.
如果我在浏览器中打开 Index.html 并在我的导航栏中单击主页，我将被导航到与 Index.html 完全相同的页面，但在此页面上，我希望主页导航字段被突出显示。我是否必须（在 Home.html 中）声明此字段处于活动状态？我怎么做。
NAV: (in home.html currently the same as in index.html)
NAV：（目前在 home.html 中与在 index.html 中相同）
<ul id="Navigation">
<li><a href="home.html">IC Home</a></li>
<li><a href="forum.html">IC Forum</a></li>
<li><a href="#contact.html">IC Contact</a></li>
</ul>
Do I have to put something which states that <li><a href="home.html">IC HOME</a></li>is active?
我是否必须放置一些表明<li><a href="home.html">IC HOME</a></li>处于活动状态的东西？
This is how I did the hover effect in my css file:
这就是我在 css 文件中实现悬停效果的方式：
ul#Navigation a:hover, ul#Navigation span
{
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #adadad;
}
and I thought i could just do the same for active:
我想我可以对 active 做同样的事情：
ul#Navigation a:active, ul#Navigation span
{
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #adadad;
}
I'd really appreciate some help as I'm still new to this.
我真的很感激一些帮助，因为我还是新手。
回答by drip
You must add a class to the active navigation element and styled it.
您必须向活动导航元素添加一个类并为其设置样式。
HTML:
HTML：
<ul id="Navigation">
<li><a href="home.html">IC Home</a></li>
<li><a href="forum.html" class="active">IC Forum</a></li>
<li><a href="#contact.html">IC Contact</a></li>
</ul>
CSS:
CSS：
ul#Navigation .active{
border-color: white;
border-left-color: black;
border-top-color: black;
color: white;
background-color: #adadad;
}
So on forum.htmlthe active class will be on the IC Forum link.
所以关于forum.html活动类将在 IC 论坛链接上。
For the contact.htmlwill be on the IC Contact and so on...
对于contact.html将在 IC Contact 等...
回答by aahhaa
yes you need to change the nav on every html page. or you need some script to detect what page it is on. active only applied the style on your mouseDown on the link.
是的，您需要更改每个 html 页面上的导航。或者您需要一些脚本来检测它所在的页面。active 仅在链接上应用了 mouseDown 上的样式。
<ul id="Navigation">
<li><a href="home.html" class="activePage">IC Home</a></li>
<li><a href="forum.html">IC Forum</a></li>
<li><a href="#contact.html">IC Contact</a></li>
</ul>
.activePage {
// different style here.
}
回答by Lal
According to W3Schools
Definition and Usage The :active selector is used to select and style the active link.
定义和用法 :active 选择器用于选择和设置活动链接的样式。
A link becomes active when you click on it.
单击链接时，链接变为活动状态。
To highlight current page in the navigation you need to add extra class to mark the element as the active page (current page). for example you will have
要在导航中突出显示当前页面，您需要添加额外的类以将元素标记为活动页面（当前页面）。例如你会有
#navigation li a.current{
color: #ffffff;
background:#f1d74c;
}
and the html
和 html
<div id="navigation">
<li>
<a ...> other page</a>
</li>
<li>
<a class="current" ...>current page</a>
</li>
</div>
It's a server-side thing -- when rendering the page, add a class like "current" to the link. Then you can style it separately from the other links.
这是服务器端的事情——在呈现页面时，向链接添加一个像“current”这样的类。然后，您可以将其与其他链接分开设置。
For example
例如
StackOverflowrenders the links with class="youarehere" when it points to the page you're already on.
StackOverflow当链接指向您已经在的页面时，使用 class="youarehere" 呈现链接。
回答by seemly
Rather than just placing a class on a direct parent element, it can be beneficial to provide a base parent class on the body tag, allowing control over all elements within that page (if possible).
与其将一个类放在直接的父元素上，不如在 body 标签上提供一个基父类，允许控制该页面中的所有元素（如果可能）。
When doing that, you can use attribute selectors in CSS, like this and style as required:
这样做时，您可以在 CSS 中使用属性选择器，如下所示，并根据需要使用样式：
.page-contact [href^="contact"] {
//do something
}
I have provided a low-level example, here: http://codepen.io/seemly/pen/HIKlb
我在这里提供了一个低级示例：http: //codepen.io/seemly/pen/HIKlb
Also as you are new to HTML and CSS, take the following advice - there is no real need to use ID's in HTML for styling purposes. Ever. Use CSS classes instead.
另外，由于您是 HTML 和 CSS 的新手，请遵循以下建议 - 没有必要在 HTML 中使用 ID 来进行样式设置。曾经。请改用 CSS 类。
