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

Question

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

Answer 1

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

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

Answer 2

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

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