Question

我对html中的菜单栏有疑问。我尝试将当前页面的颜色设置为菜单栏中的正常颜色，但我编写的代码不起作用。

＆＃13;

   #menubar,
    #menubar ul{
list-style: none;
margin-bottom: 5%;
}

#menubar>li{
float: left;
}

#menubar li a{
display: block;
height: 125%;
width: 100%;
padding: 10px;
text-decoration: none;
}

#menubar>li>a{
background-color: orangered;
color: #fff;
}
/*submenu*/
#Bloglijst{
position: absolute;
background-color: #efefef;
z-index: 9999;
display: none;
}

#Bloglijst>li>a{
color: #121;
width: auto;
}
#menubar li a:hover{
 background-color: #ffffff;
 color: chocolate;
 }
#menubar li:hover #Bloglijst{
display: block;
}


#ProjectLijst{
position: absolute;
background-color: #efefef;
z-index: 9999;
display: none;
}

#ProjectLijst>li>a{
color: #121;
width: auto;
}
#menubar li:hover #ProjectLijst{
display: block;
}
#welkomstekst{
margin-top: 10%;
}
#menubar{
width: 75%;
padding: 0;
}
.active{
background-color: yellow;
}

＆＃13;

<li class="active"><a href="index.html"> Home </a> </li>
<li class="active" ><a href="HTML5/Blog.html"> Blog </a>
    <ul id= "Bloglijst">
        <li><a href="HTML5/Daily-Blog.html">Daily-Blog</a> </li>
    </ul>
</li>
<li class="active"><a href="HTML5/Contact.html"> Contact </a>
<li class="active"><a href="HTML5/Projects.html"> Projects </a>
    <ul id= "ProjectLijst">
        <li><a href="HTML5/Sport.html">Sport</a> </li>
        <li><a href="HTML5/School.html">School</a> </li>
        <li><a href="HTML5/Hobby.html">Hobby</a> </li>
    </ul>
</li>
<li class="active"><a href="HTML5/Interests.html"> Interests </a></li>
<li class="active"><a href="HTML5/Connections.html"> Connections </a></li>

＆＃13;

Answer 1

你有很多评论链接到建议，但为了以防万一，这是处理你想要的最简单的方法：

每个菜单项上都有一个类.active，你想要的只是在与当前页面对应的菜单项上.active。例如：

<li class="active"><a href="index.html"> Home </a> </li>
<li><a href="HTML5/Blog.html"> Blog </a>
...

这将是您index.html页面的标记。您的Blog.html页面看起来像这样：

<li><a href="index.html"> Home </a> </li>
<li class="active"><a href="HTML5/Blog.html"> Blog </a>
...

对每个页面重复此操作，您应该正确设置。

然后，只需将您想要的颜色应用于.active类，它只会显示在当前页面上。

如何在菜单栏中显示当前页面的网站和其他颜色？

1 个答案: