点击导航栏上的颜色改变颜色

我在第一次访问网站时遇到了问题。我已经成功地在顶部创建了一个导航栏，它看起来和行为有点像我想要的（除了颜色方案，但可以稍后）。问题在于，无论何时点击栏上的不同链接，我都希望该框改变颜色，但目前它在主页上突出显示。我认为这是超级简单的东西，但我找不到它。感谢您的帮助。点击导航栏上的颜色改变颜色

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 
 

 
}

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

来源

2017-05-18 Discus

您还可以使用jQuery突出显示菜单：[demo]（https://jsfiddle.net/xLo71Lk3/） –

更改此：

a.active 
    background-color: #EAB126 
}

这样：

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

Here is the JSFiddle demo

ŧ他做你的问题，但如果这是一个导航栏，然后记住，控制将失去焦点，只要你改变页面。如果你使用Javascript/JQuery来更容易处理，那会更好。

来源

2017-05-18 06:50:15

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

现在修改你的头（网页专区内）如下：

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

那么对于当前页的菜单项突出显示。

恭喜您的第一个网站！

来源

2017-05-18 07:20:29 WahhabB

点击导航栏上的颜色改变颜色

回答

相关问题