javascript - Adding class to li on click -

i must missing here thought work.i have navbar , upon clicking links navigate through site, simple enough.. when click on anchor tag li have class name assigned it, adding styling link user can identify page on

navbar

 <ul id="main-menu" class="clearfix">     <li>       <%= link_to '<i class="icon-home"></i> home'.html_safe, root_path %>     </li>      <li>       <%= link_to '<i class="icon-desktop"></i> me'.html_safe, pages_aboutme_path %>    </li>      <li>       <%= link_to '<i class="icon-picture"></i>  portfolio'.html_safe, pages_portfolio_path %>     </li>      <li>       <%= link_to '<i class="icon-comments"></i> blog'.html_safe, blog_path %>     </li>      <li>       <%= link_to '<i class="icon-envelope"></i> contact'.html_safe, contact_path %>     </li>   </ul> 

my jquery attempt

$('#main-menu > li > a').click(function() {   $(this).parent('li').addclass('current-menu-item'); }); 

am correct in thinking rendering of new page causing issue here?

any pointers appreciated

when link clicked page changing, means html re-loaded - clearing added css classes before you've noticed them. you're better off using server side script work out page active , sending html active class on li