html - 单击子链接时将父类更改为“活动”

Question

是的，我已经看到了关于这个主题的以下信息，所以了解更多关于这里是我到目前为止所阅读的内容：

删除/添加链接类 onclick

使用 jQuery 更改元素的 ID

我已经阅读了明显的 jquery UI 页面，但我找不到添加 onclick 以便它将“父”元素更改为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-->

下面是我用来定位 onlick 链接的代码，即使我这样做我希望父 li 变得活跃，而所有其他人都不活跃

<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');
});