HTML/CSS 导航栏活动状态

Question

我刚接触 HTML 和 CSS，并且已经成功实现了我的导航栏，目前运行良好。它是黑色的，在悬停在字段上时，它们会变成灰色。

现在，我正在尝试实现活动页面的字段保持在灰色状态，但我迄今为止还没有成功，我认为这是因为 HTML 的原因。在 index.html 中，不应该激活任何内容，因为我以后不会使用该页面。它只是标准页面。 例如，然后我有 Home.html、Contact.html 和 Forum.hmtl。

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

我真的很需要帮助，因为我还是新手。

这段话与IT技术无关。

- user3919507

---

是的，您必须将其标记为活动状态。我相信:active仅在单击链接时才会出现。 - putvande

Answer 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联系人”上，以此类推...

- drip

Answer 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. 
}

- aahhaa

Answer 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”呈现链接。

- Lal

Answer 4

不仅仅是将类放在直接父元素上，提供一个基础的父类在body标签上可能更有益，允许控制页面内所有元素（如果可能）。

这样做时，您可以在CSS中使用属性选择器，像这样并根据需要进行样式设置：

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

我在这里提供了一个低级别的例子： http://codepen.io/seemly/pen/HIKlb 另外，由于你是HTML和CSS的新手，请听取以下建议 - 在HTML中没有必要为样式目的使用ID。永远使用CSS类。

- seemly