2015-09-18 81 views
0

如何將class="active"添加到點擊的li對象? 當我點擊鏈接時,它目前沒有工作。請在下面找到我的代碼。Add Class to clicked li object

<div class="nav-collapse collapse pull-right"> 
        <ul id="menu" class="nav"> 
         <li><a href="Default.aspx">Anasayfa</a></li> 
         <li><a href="About.aspx">Hakkımızda</a></li> 
         <li class="dropdown"> 
          <a href="#" class="dropdown-toggle " data-toggle="dropdown">Hizmetlerimiz <i class="icon-angle-down"></i></a> 
          <ul class="dropdown-menu"> 
           <li><a href="WebDesign.aspx">Web Tasarım</a></li> 
           <li><a href="GraphicDesign.aspx">Grafik Tasarım</a></li> 
           <li><a href="MatbaaHizmetleri.aspx">Matbaa Hizmetleri</a></li> 
           <li><a href="PromosyonHizmetleri.aspx">Promosyon Hizmetleri</a></li> 
           <li><a href="AcikHavaReklam.aspx">Açık Hava Reklamcılığı</a></li> 
           <li><a href="StandUygulamaları.aspx">Fuar Stand Uygulamaları</a></li> 
          </ul> 
         </li> 
         <li><a href="References.aspx">Referanslar</a></li> 

         <li><a href="Blog.aspx">Blog</a></li> 
         <li><a href="Contact.aspx">İletişim</a></li>       
        </ul> 
       </div> 


header.navbar .nav > li.active > a, header.navbar .nav > li.active > a:hover { 
      background: transparent; 
      color: #2dcc70; 
      -webkit-box-shadow: none; 
      -moz-box-shadow: none; 
      box-shadow: none; 
     } 

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#menu > li > a').click(function() { 
       $('#menu > li > a').removeClass("active"); 
       $(this).addClass("active"); 
      }); 
     }); 
    </script> 
+1

你jQuery是添加/從鏈路去除該上課的時候CSS有它應用到'li' –

+0

是,但現在的工作。 –

回答

1

試試這個:

$('#menu li a').click(function() { 
      $('#menu li a').removeClass("active"); 
      $(this).addClass("active"); 
     }); 
+0

unfortanetly不工作此代碼。我該怎麼辦:((( –

0

閱讀下面的代碼,希望這有助於!

var selector = '.nav li'; 
 

 
$(selector).on('click', function(){ 
 
    $(selector).removeClass('active'); 
 
    $(this).addClass('active'); 
 
});
li.active { 
 
    color: #323643; 
 
    text-shadow: 0 0 5px black; 
 
    font-size: 20px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="nav"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
</ul>

+0

您的代碼不能正常運行我的項目,點擊菜單頁面回發。但是菜單沒有激活。爲什麼.. –