HTML/CSS 导航活动状态答案

【问题标题】：HTML/CSS Navigation active stateHTML/CSS 导航活动状态
【发布时间】：2014-10-01 02:37:21
【问题描述】：

我是 HTML 和 CSS 的新手，我刚刚完成了导航栏的实现，到目前为止效果很好。它是黑色的，在田野上空盘旋时，它们会变成灰色。

现在，我正在尝试实现活动页面的字段保持灰色，但到目前为止它对我不起作用，我相信这是因为HTML。在 index.html 上不应激活任何内容，因为我以后不会使用该页面。这只是标准的一面。例如，我有 Home.html、Contact.html 和 Forum.hmtl。

如果我在浏览器中打开 Index.html 并在导航栏中单击主页，我将被导航到与 Index.html 完全相同的页面，但在此页面上我希望主页导航字段突出显示。我是否必须（在 Home.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>

我是否必须填写一些声明<li><a href="home.html">IC HOME</a></li> 处于活动状态的内容？

这就是我在我的 css 文件中制作悬停效果的方式：

ul#Navigation a:hover, ul#Navigation span 
{
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: #adadad;
}

我认为我可以对 active 做同样的事情：

ul#Navigation a:active, ul#Navigation span 
{
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #adadad;
}

非常感谢一些帮助，因为我还是新手。

【问题讨论】：

是的，您必须将其标记为活动。 :active 只有当你点击我相信的链接时。

标签： html css navigation

【解决方案1】：

您必须向活动的导航元素添加一个类并为其设置样式。

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：

ul#Navigation .active{
    border-color: white;
    border-left-color: black; 
    border-top-color: black;
    color: white; 
    background-color: #adadad;
}

所以在forum.html 上，活动课程将在 IC 论坛链接上。

对于contact.html 将在 IC Contact 等处...

【讨论】：

【解决方案2】：

是的，您需要更改每个 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. 
}

【讨论】：

【解决方案3】：

根据W3Schools

定义和用法 :active 选择器用于选择和设置样式活动链接。

当您点击链接时，该链接将变为活动状态。

要在导航中突出显示当前页面，您需要添加额外的类以将元素标记为活动页面（当前页面）。例如，您将拥有

#navigation li a.current{
   color: #ffffff;
   background:#f1d74c;
}

和html

<div id="navigation">
    <li>
        <a ...> other page</a>
    </li>
    <li>
        <a class="current" ...>current page</a>
    </li>
</div>

这是一个服务器端的事情——在渲染页面时，向链接添加一个类似“current”的类。然后，您可以将其与其他链接分开设置样式。

例如

StackOverflow 在指向您已经在的页面时呈现带有 class="youarehere" 的链接。

【讨论】：

【解决方案4】：

不只是在直接父元素上放置一个类，在 body 标签上提供一个基父类会很有好处，允许控制该页面中的所有元素（如果可能的话）。

这样做时，您可以在 CSS 中使用属性选择器，像这样和需要的样式：

    .page-contact [href^="contact"] { 
      //do something 
    }

我在这里提供了一个低级示例： http://codepen.io/seemly/pen/HIKlb

另外，由于您是 HTML 和 CSS 新手，请接受以下建议 - 没有必要在 HTML 中使用 ID 来进行样式设置。曾经。改用 CSS 类。

【讨论】：