2016-10-21 26 views
0

この質問はこのフォーラムではすごく参考になりましたが、私は何時間もグーグルで問題が発生しています。私が選択/サブメニューをクリックしたとき親がliクラスを取得する.actives Javascript/Jqueryを使用します。ご協力いただきありがとうございます:) ここでは、私のコードは次のとおりです。サブメニューが選択されたときに親クラスにクラスを追加する

 <nav class="navbar navbar-default navbar-static-top"> 
    <div class="container-fluid container"> 
     <div class="row m04m"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_nav"> 
        <span class="bars"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </span> 
        <span class="btn-text">Select Page</span> 
       </button> 
      </div> 
      <div class="collapse navbar-collapse" id="main_nav"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="index-2.html">Home</a></li> 
        <li class=" dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">ABOUT</a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="about-us.html">About Company</a></li> 
          <li><a href="about-plasma.html">About Jump</a></li> 
         </ul> 
        </li> 
        <li><a href="services.html">LINK</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</nav> <!--Main Nav--> 

、ここでは私のCSSはあなたの助けを

.actives{background-color:#174069;} 

おかげで

+0

あなたのjavascriptはどこですか –

+0

重複http://stackoverflow.com/questions/11533542/twitter-bootstrap-add-active-class-to-li –

答えて

0

この例のコードは、あなたがあなたの条件としてそれを修正するのに役立ちます

$('#menu').find('li').click(function(){ 
     //removing the previous selected menu state 
     $('#menu').find('li.active').removeClass('active'); 

     //is this element from the second level menu? 
     if($(this).closest('ul').hasClass('secondLevel')){ 
      $(this).parents('li').addClass('active'); 

     //this is a parent element 
     }else{ 
      $(this).addClass('active'); 
     } 
    }); 


#menu li.active{ 
    background: #ccddff; 
} 

デモサンプルコード: http://jsfiddle.net/L94N6/4/

関連する問題