单击子链接“活动”时更改PARENT类

时间:2013-06-23 12:25:32

标签: html jquery uinavigationbar

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

Removing/adding link class onclick

Changing an element's ID with jQuery

我已经阅读了明显的jquery UI页面,但我找不到添加onclick的方法,以便将“parent”元素更改为 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(){

1 个答案:

答案 0 :(得分: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');
});