使点击的导航栏元素具有不同的颜色

Question

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

HTML & CSS:

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

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

非常感谢任何帮助，这让我很困惑。

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

参见fiddle：https://jsfiddle.net/16q2xr8k/4/

使点击的导航栏元素具有不同的颜色

Making clicked navbar element a different color

html

css

navigation

navbar