Question

我在我的第一个网站上遇到了问题。我已经在顶部成功创建了一个导航栏，它看起来和行为有点像我想要的（除了配色方案，但后来可以来）。问题是每当我点击栏上的其他链接时，我希望该框改变颜色，但它当前在主页上突出显示。我认为这是一个非常简单的东西，但我找不到它。谢谢你的帮助。

＆＃13;

body
{
    font-family:sans-serif;
    width: 100%;
    margin: 0px;
}

/* upper strip holding the tabs*/
ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position:fixed;
    top: 0px;
    width: 100%;
    background-color: #328CC1
}

li
{
    float:left;
    border-right:3px solid #30FFE3;
}


li a
{
    display: block;
    color: whitesmoke;
    text-decoration: none;
    padding: 14px 16px;
    text-align: center;

}

li a:hover:not(.active) 
{
    background-color: #111;
}

a.active
{
    background-color: #EAB126

}

＆＃13;

<ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#academics">Academics</a></li>
    <li><a href="#athletics">Athletics</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

＆＃13;

Answer 1

改变这个：

a.active
  background-color: #EAB126
}

到此：

li a:focus {
  background-color: #EAB126
}

Here is the JSFiddle demo

这就是你问的但是如果这是一个导航栏那么请记住，一旦你改变页面，控件就会失去焦点。如果你使用Javascript / JQuery更容易处理它会更好。

Answer 2

处理此问题的一种典型方法是让每个页面都有一个包含页面名称的类：例如<div class="academics">。

现在修改标题（在页面div中），如下所示：

        <ul>
            <li><a class="for_home" href="#home">Home</a></li>
            <li><a class="for_academics" href="#academics">Academics</a></li>
            <li><a class="for_athletics" href="#athletics">Athletics</a></li>
            <li><a class="forcontact" href="#contact">Contact</a></li>
        </ul>

接下来是css如下：

.home .for_home, .academics .for_academics, .athletics .for_athletics, .contact .for_contact {
  background-color: #EAB126;
}

然后将突出显示当前页面的菜单项。

祝贺你的第一个网站！

单击html

2 个答案: