我一直在尝试制作概念资料页面，到目前为止，我一直在尝试将导航栏的事件背景颜色更改为默认白色以外的其他颜色。
我试过使用“.nav li:active”，但只有当我点击按钮时它才会改变颜色，然后它又变成白色。 "body .nav>.active>a "也什么都不做，所以此时我不知道应该如何自定义它。
.navbar {
background-color: #1A85C9;
padding: 20px;
border-style: none;
}
.navbar-brand {
font-size: 30px;
font-family: Copperplate Gothic Light, sans-serif;
color: white;
padding-left: 300px;
padding-right: 300px;
}
.navbar a {
font-size: 30px;
font-family: Copperplate Gothic Light, sans-serif;
color: white !important;
}
.nav li:active {
background-color: #D65108 !important;
}
.nav li {
margin-left: 10px
}
body .nav>.active>a {
background-color: #EFA00B
}
.nav li:hover {
background-color: #003EBA;
border-radius: 10px
}
#about {
padding: 40px;
height: 500px;
background-color: #ED3500
}
#portfolio {
padding: 40px;
height: 500px;
background-color: #F09F00
}
#contact {
padding: 40px;
height: 500px;
background-color: #8AD13B
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target=".navbar">
<nav class="navbar navbar-fixed-top navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> <b>Concept Portfolio SPA </b>
</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#about"><b>ABOUT</b></a>
</li>
<li><a href="#portfolio"><b>PORTFOLIO</b></a>
</li>
<li><a href="#contact"><b>CONTACT ME</b></a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="about"></div>
<div id="portfolio"></div>
<div id="contact"></div>
</body>感谢您的帮助。
最佳答案
所以我发现事件颜色是用
改变的.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background-color: ######;
}希望这对遇到与我有同样问题的这篇文章的其他人有所帮助。
关于jquery - 如何在单页应用程序 [Bootstrap] 上更改导航栏的事件颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40581178/