Question

我正在使用导航栏，并且我试图制作它，以便在点击导航栏的某个元素时，它们会变成不同的颜色。现在，默认是这种平淡的灰色，我希望它是一个紫色的阴影。 This is what it looks like now.

HTML＆amp; CSS：

＆＃13;

.navbar {
	background-color: #57068c;
	font-family: "Kalinga";
}

.navbar-header a{
	font-weight:bold;
	font-size: 1.5em;

}

.navbar.navbar-default.navbar-static-top a{
	color:white;
}

/*Formatting for main navbar elements*/
.navbar-collapse.collapse ul li a{
	color: white;
}

.navbar-collapse.collapse ul li a:hover{
	color: #90dfff;
}

/*Formatting for all drop-down menus*/
.navbar-collapse.collapse ul li ul li a{
	color: white;
	background-color: #57068c;
}

.navbar-collapse.collapse ul li ul li a:hover{
	background-color:#7b08c6;
}

/*Formatting for body and header tags*/
body{

	font-family: "Kalinga";
}

h1,h3 {
	font-weight: bold;
}

＆＃13;

<!DOCTYPE HTML>
<html lang = "en">
	<head>
		<title>Site Header</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
		<link rel ="stylesheet" href="css/style1.css">
		<meta name = "viewport" content ="width=device-width, initial-sclae=1">
	</head>

	<body>
		
		<nav>
		 	<div class= "navbar navbar-default navbar-static-top" role="navigation">
		 		<div class = "container">

		 			<div class="navbar-header">
		 				<!--Hamburger Menu Button and Logo-->
		 				<button type = "button" class = "navbar-toggle" data-toggle="collapse" data-target = ".navbar-collapse">
		 					<span class ="sr-only">Toggle navigation</span>
		 					<span class="icon-bar"></span>
		 					<span class="icon-bar"></span>
		 					<span class="icon-bar"></span>
		 				</button>

	 					<a class = "navbar-brand" href="#">SiteHeader</a>

		 			</div>


					<!--Nav igation Bar-->
		 			<div class = "navbar-collapse collapse">

		 				<ul class="nav navbar-nav navbar-center">

		 					<li class ="dropdown">
		 						<a href="#" class = "dropdown-toggle" data-toggle = "dropdown">About<b class = "caret"></b></a>

		 						<ul class = "dropdown-menu">
		 							<li><a href="#">Place</a></li>
		 							<li><a href="#">Place</a></li>
		 							<li><a href="#">Place</a></li>
		 						</ul>
		 					</li>


		 					<li class ="dropdown">
		 						<a href="#" class = "dropdown-toggle" data-toggle = "dropdown">About<b class = "caret"></b></a>

		 						<ul class = "dropdown-menu">
		 							<li><a href="#">Place</a></li>
		 							<li><a href="#">Place</a></li>
		 							<li><a href="#">Place</a></li>
		 						</ul>
		 					</li>


		 					<li class ="dropdown">
		 						<a href="#" class = "dropdown-toggle" data-toggle = "dropdown">About<b class = "caret"></b></a>

		 						<ul class = "dropdown-menu">
		 							<li><a href="#">Place</a></li>
		 							<li><a href="#">Place</a></li>
		 							<li><a href="#">Place</a></li>
		 						</ul>
		 					</li>

		 				</ul>
		 			</div>

		 		</div>

		 	</div>

		</nav>

		<div class = "container">	

			<div class = "main">
				<div class = "page row" id = "starter">
					

					<div class = "col-sm-12">

						
					</div>
				</div>

				<div class = "page row" id = "Clubs AND Campus Map">
					<div class = "col-sm-6">
						
					</div>

					<div class = "col-sm-6">
						
					</div>

				</div>


				<div class = "page row" id = "Software AND Text and Teach">
					<div class = "col-sm-6">
						
					</div>

					<div class = "col-sm-6">
						
					</div>
					
				</div>
			</div>
		
			<footer>
				
			</footer>
		</div>

	 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	</body>

</html>

＆＃13;

任何帮助都非常感激，这让我很难过。

Answer 1

将此添加到您的css

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    color: white;
    background-color: #57068c;
}

请参阅小提琴：https://jsfiddle.net/16q2xr8k/4/

使点击的导航栏元素变为不同的颜色

1 个答案: