Navbar Active Link Highlighting on Simple Single Page Application

index.html

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Rayan Al-Hammami</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Home</a></li>
      <li><a href="#1">About</a></li> 
      <li><a href="#2">Portfolio</a></li>
      <li><a href="#3">Contact</a></li> 
    </ul>
  </div>
</nav>

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>

script.js

$(".nav li a").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).parent().addClass("active");
});

style.css

.nav .active>a{
  background: red !important;
}