Active Navbar

Active Navbar

I Have the following code for my nav bar . Its a one page website and has 5 sections , each devided by a "Div" tag and given an ID . 

  2. <div class="navbar-collapse collapse">
  3. <ul class="nav navbar-nav pull-right" id="nav">
  4. <li class="active"><a href="#" >Home</a></li>
  5. <li><a href="#gallery">About</a></li>
  6. <li class="dropdown">
  7. <a href="#" class="dropdown-toggle" data-toggle="dropdown">Offerings <b class=" caret"> 
  8. </b> </a>
  9. <ul class="dropdown-menu">
  10. <li ><a href="#" id="home">Diamonds</a></li>
  11. <li><a href="#">Emralds</a></li>
  12. <li><a href="#">EarthStones</a></li>
  13. <li><a href="#">Natural stones</a></li>
  14. </ul>
  15. <li><a href="#process" id="team">Team</a></li>
  16. <li><a href="#contactus">Contact</a></li>
  17. </ul>
  18. </div>
  19. </div>
  20. </div>


I wanted to Use Jquery to select the Element on the Navbar thats active , so i used the Following code 

  2. <script>
  3. $(document).ready(function() {
  4.  $(".nav li").click(function(event) { 
  5.     
  6.       $(".nav li ").removeClass("active"); //Remove any "active" class 
  7.       $("li", this).addClass("active"); //Add "active" class to selected tab // 
  8.       // $(activeTab).show(); //Fade in the active content 
  9. });
  10. });
  12. </script>


The above code was directly copied from a Jsfiddle i found on Stackexchange.com , i am new to Jquery , but i do get the hang of it ? 

heres the JS fiddle link if it helps .  Js Fiddle Link

am i missing something ? 

Thank you . 

Gautam