Change PARENT class when child link is clicked to "active"

Question

Right I have seen the following information on this topic so do understand more about is here is what I have read so far:

Removing/adding link class onclick

Changing an element's ID with jQuery

and I have read the obvious jquery UI page but I can't find the way to add the onclick so that it changes the "parent" element to class="active"

      <!--navbar--> 
      <nav class="top-bar">
      <ul class="title-area">
    <!-- Title Area -->
    <li class="name">
    <h1><a href="#" >Relution.co.uk</a></h1>
    </li>
    <li class="toggle-topbar menu-icon">
    <a href="#"><span>Menu</span></a>
    </li>
 </ul>
 <section class="top-bar-section">
    <!-- Left Nav Section -->
    <ul class="left hide-for-medium-up">
   <li class="has-form"><a href="#" data-reveal-id="LoginModal" class="button">Click Here to login</a></li>
        <li class="has-form"><a href="#" data-reveal-id="RegModal" class="button">Not a member?           Register for free</a></li>

    </ul>
    <!-- Right Nav Section -->
    <ul class="right">
        <li class="divider"></li>
        <li class="active"><a href="index.php">Home</a></li>
        <li class="divider"></li>
        <li><a href="about.php">About</a></li>
        <li class="divider"></li>
        <li><a href="services.php">Services</a></li>
        <li class="divider"></li>
        <li><a href="portfolio.php">Portfolio</a></li>
        <li class="divider"></li>
        <li><a href="contact.php">Contact</a></li>
        <li class="divider"></li>

        <li class="has-dropdown hide-for-small">
            <a href="#" ><i class="foundicon-settings"></i></a>
                <ul class="dropdown">
                    <li><a href="#" data-reveal-id="SearchModal" class="button"><i class="foundicon-search"></i> Search</a></li>
                </ul>
        </li>


       <li class="has-form hide-for-medium-up">
        <form>
          <div class="row collapse">
            <div class="small-8 columns">
              <input type="text">
            </div>
            <div class="small-4 columns">
              <a href="#" class="button alert">Search</a>
            </div>
          </div>
        </form>
      </li>

     </ul>
 </section>
 </nav>
 <!--/navbar-->

Below is the code that I'm using to target the links for an onlick even when I do this I want the parent li to become acive and all others to not be active

<script>
  $(document).ready(function() {
 $('nav.top-bar > section.top-bar-section > ul.right > li > a').click(function(){

Answer 1

http://jsfiddle.net/n5CLu/

$('nav.top-bar > section.top-bar-section > ul.right > li > a').click(function(e){
    e.preventDefault();
    $(this).parent().addClass('active').siblings().removeClass('active');
});