Question

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

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

如果我在浏览器中打开Index.html并在我的Navbar中单击Home，我将导航到与Index.html完全相同的页面，但在此页面上我希望主页导航区域突出显示。我是否必须（在Home.html中）说明此字段是否有效？我该怎么做。

资产净值:(在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;
}

我认为我可以为活动做同样的事情：

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

我真的很感激一些帮助，因为我还是新手。

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联系人等等......

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

Answer 3

根据W3Schools

定义和用法：主动选择器用于选择和样式活动链接。

单击链接后，该链接将变为活动状态。

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

#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>

这是服务器端的事情 - 在呈现页面时，向链接添加类似“当前”的类。然后，您可以将其与其他链接分开设置样式。

例如

StackOverflow在指向您已经使用的网页时，会使用class =“youarehere”呈现链接。

Answer 4

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

这样做时，您可以在CSS中使用属性选择器，如下所示：

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

我提供了一个低级示例，此处： http://codepen.io/seemly/pen/HIKlb

另外，由于您不熟悉HTML和CSS，请遵循以下建议 - 实际上不需要在HTML中使用ID来进行样式设置。永远。改为使用CSS类。

HTML / CSS导航活动状态

4 个答案: