html - 单击html时导航栏更改颜色

标签 html css navigation navbar nav

我在我的第一个网站上遇到了问题。我已经成功地在顶部创建了一个导航栏,它的外观和行为有点像我想要的(除了配色方案,但稍后会出现)。问题是,每当我单击栏上的不同链接时,我希望该框更改颜色,但它目前在主页上突出显示。我认为这是非常简单的事情,但我找不到。感谢您的帮助。

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>

最佳答案

改变这个:

a.active
  background-color: #EAB126
}

为此:

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

Here is the JSFiddle demo

这会按照您的要求进行操作,但是如果这是一个导航栏,那么请记住,一旦您更改页面,该控件就会失去焦点。如果您使用 Javascript/JQuery 来更轻松地处理它会更好。

关于html - 单击html时导航栏更改颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44040420/

相关文章:

具有不同名称的 JavaFX 2 类具有相同的 css 代码

python - 将 showforms() 命令与 Twill 结合使用时出现解析错误

java - 如何在jsp中显示日期,如 "2017-08-30 14:35:43"

javascript - svg 无法在 IE 中正常显示工具提示,但在 Chrome 中正常显示

javascript - 如何将事件元素id添加到url

php - 使用 mysql 列表中生成的数据

css - 将鼠标悬停在子菜单(第二个 ul 元素)中的任何 li 元素上时,如何更改第一个 ul li 的颜色 - 只有两个 span 图标?

css - 背景图片随机丢失

Android 在 Nexus 设备上隐藏软键

Android FLAG_KEEP_SCREEN_ON fragment 抽屉导航