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

Question

我目前正在处理我网站的导航栏。我的导航栏上有五个元素，我想在单击某个元素时使它变暗。
这些是我到目前为止尝试过的:
jQuery 改变事件元素:

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

导航栏上的五个元素:

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

这是网站截图:

但它似乎不起作用，每次都只选择关于。有任何想法吗？非常感谢。

Answer 1

<script type="text/javascript">
        $(function(){
         $(".navbar-nav li a").on('click',function(){
            $(nav-bar-nav li).toggleClass("active"); 
});

});

 <ul class="nav navbar-nav">
    <li class=""><a href="#">About</a></li>  /*Just remove active class and add with js*/
    <li><a href="#">News</a></li>
    <li><a href="#">Intern</a></li>
    <li><a href="#">Form</a></li>
  </ul>

.active{
background:black;
}

.active a{
  color:#ffffff;
}