HTML / CSS导航活动状态 [英] HTML/CSS Navigation active state

问题描述

我是新来的 HTML 和 CSS ，刚刚完成我的导航栏， 。它是黑色的，在他们变成灰色的田地上盘旋。

现在，我试图实现活动页面的字段保持灰色，但目前为止我不适合我，我相信这是因为 HTML 。在index.html上，任何东西都不应该被激活，因为我稍后将不会使用该页面。这只是标准方面。
例如，我有Home.html，Contact.html和Forum.hmtl。

如果我在浏览器中打开Index.html，并在我的导航栏中单击Home，我将导航到与Index.html完全相同的页面，但在这个页面我希望主页导航栏被突出显示。我必须（在Home.html中）声明此字段是活动的吗？如何做到这一点。

NAV :(在home.html中目前与index.html中的相同）

 < ul id =导航> 
< li>< a href =home.html> IC主页< / a>< / li> 
< li>< a href =forum.html> IC论坛< / a>< / li> 
< li>< a href =＃contact.html> IC联络人< / 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;边框顶部颜色：黑色; 
颜色：白色; background-color：#adadad; 
} 
  

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

  ul＃Navigation a：active，ul＃Navigation span 
 {
 border-color：white; 
 border-left-color：black;边框顶部颜色：黑色; 
颜色：白色; background-color：#adadad; 
} 
  

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

解决方案

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

HTML：

 < ul id =Navigation> 
< li>< a href =home.html> IC主页< / a>< / li> 
< li>< a href =forum.htmlclass =active> IC论坛< / a>< / li> 
< li>< a href =＃contact.html> IC联络人< / a>< / li> 
< / ul> 
  

CSS：

  ul＃Navigation .active {
 border-color：white; 
 border-left-color：black; 
 border-top-color：black; 
颜色：白色; 
 background-color：#adadad; 
 
  

因此， forum.html 主动类将在IC论坛链接上。

对于 contact.html 将位于IC联系人上，等等...

I'm new to HTML and CSS and I just finished implementing my Navigation Bar which works great so far. It is black and on hovering over the fields they turn grey.

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.

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.

NAV: (in home.html currently the same as in 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?

This is how I did the hover effect in my css file:

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:

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.

解决方案

You must add a class to the active navigation element and styled it.

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

So on forum.html the active class will be on the IC Forum link.

For the contact.html will be on the IC Contact and so on...

这篇关于HTML / CSS导航活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！