单击链接时如何使背景变暗？

Question

I am currently working on the navbar of my website. There are five elements on my navbar and I'd like to make an element darker when it is clicked.
These is what I've tried so far:
jQuery to change the active element:

  <script type="text/javascript">
        $(function(){
            $('nav navbar-nav a').filter(function(){return this.href==location.href}).parent().addClass('active').siblings().removeClass('active')
            $('nav navbar-nav a').click(function(){
                $(this).parent().addClass('active').siblings().removeClass('active')    
            })
        })
  </script>

The five elements on the navbar:

<nav class = "navbar navbar-inverse">
<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="#">Intern Web</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">About</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Intern</a></li>
    <li><a href="#">Form</a></li>
  </ul>

This is a screenshot of the website:

But it seems to not be working, only About is selected every single time. Any ideas? Thanks a lot.

Answer 1

Use code as below:

DO NOT forget . before className in JQuery:

$('.nav .navbar-nav a') instaed $('nav navbar-nav a')

 $('.navbar-nav li a').click(function(){
    $(".navbar-nav li").removeClass("active");
   $(this).parent().addClass("active");
});

.active{
background:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class = "navbar navbar-inverse">
<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="#">Intern Web</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">About</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Intern</a></li>
    <li><a href="#">Form</a></li>
  </ul>

</div>