如何使用jquery更改导航链接的颜色或背景颜色？

Can someone know, what's wrong with my code? It is when you are in the page the current color or background will be change. example the color is of the nav is red, so when you go to the about us the color of it will be yellow and the rest of the link still red, Here is my fiddle:

有人知道，我的代码出了什么问题？当您在页面中时，当前颜色或背景将会发生变化。例如导航的颜色是红色的，所以当你去约会我们时，它的颜色将是黄色，链接的其余部分仍然是红色，这是我的小提琴：

https://jsfiddle.net/nhyr8pnd/

 <ul class="topnav" id="main-menu">
      <li ><a href="#" class="active" ><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
      <li><a href="#" ><i class="fa fa-file" aria-hidden="true"></i> Home2</a></li>
      <li><a href="#" ><i class="fa fa-codepen" aria-hidden="true"></i> Home3</a></li>
      <li><a href="#" ><i class="fa fa-globe" aria-hidden="true"></i> Home4</a></li>
  </ul>


#main-menu li {
display: inline-block;
font-family: 'Raleway', sans-serif;

padding: 17px 25px;
}
#main-menu li a {
   color:#333333;
   font-size:15px;
}
#main-menu li.active a {
 color:#0198cf;
}
 #main-menu li:last-child  {
 padding-right: 0;
}
.active{background-color:#ccc;}



$(document).ready(function(e){
  $('#main-menu li').click(function(e) {
    $('#main-menu li').removeClass('active');
    $(this).addClass('active');
  });
});

Ps: I'm using header.php, so I don't need to copy all the nav in every page, so basically if the answer is putting an active class in every page is not an answer

Ps：我正在使用header.php，所以我不需要在每个页面中复制所有导航，所以基本上如果答案是在每个页面中放置一个活动类不是答案

2 个解决方案

#1

You are selecting li instead you should select a inside of li on click event.

你选择li而不是你应该在点击事件中选择li。

$(document).ready(function(e){
    $('#main-menu li').click(function(e) {
      $('#main-menu li a').removeClass('active');
      $(this).children("a").addClass('active');
    });
  });

#2

Please check .It's work. You forget to put jQuery min file.

请检查。这是工作。你忘了把jQuery min文件。

$(document).ready(function(e){
  $('#main-menu li a').click(function(e) {         
    $('#main-menu li a').removeClass('active');
    $(this).addClass('active');
  });
});

#main-menu li {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  padding: 17px 25px;
}
#main-menu li a {
  color:#333333;
  font-size:15px;
}
#main-menu li.active a {
  color:#0198cf;
}
#main-menu li:last-child  {
  padding-right: 0;
}
.active{
  background-color:#ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="topnav" id="main-menu">
  <li ><a href="#" class="active" ><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
  <li><a href="#" ><i class="fa fa-file" aria-hidden="true"></i> Home2</a></li>
  <li><a href="#" ><i class="fa fa-codepen" aria-hidden="true"></i> Home3</a></li>
  <li><a href="#" ><i class="fa fa-globe" aria-hidden="true"></i> Home4</a></li>
</ul>

#1