Добавление активного класса в ссылку через jQuery

Question

Я совершенно новый здесь и в jQuery, но я искал связанные вопросы в stackoverflow, но никто не решает мою проблему. У меня есть этот код:

Html:

<div class="menu"> 
    <div class="menu-items"> 
     <ul class="nav"> 
     <li class="var_nav"> 
      <a href="../home.php">Home</a> 
     </li> 
     <li class="var_nav"> 
      <a href="../portfolio.php">Porfolio</a> 
     </li> 
     <li class="var_nav"> 
      <a href="../dashboard.php">Dashboard</a> 
     </li> 
     <li class="var_nav"> 
      <a href="../users.php">Users</a> 
     </li> 
     </ul> 
    </div> 
</div> 

CSS

.nav li.active { 
    background-color: #048abb; 
} 
.nav li.active a { 
    color: #fff; 
} 

Я хочу, чтобы применить класс .active к (активный ток /) ссылка щелкнутой так, что CSS может вступить в силу. Любые предложения о том, как применить класс для чтения html-кода через jQuery?

Answer 1

var $links = $('.nav a').on('click', function(e) { 
    e.preventDefault(); 

    $links.removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 2

$(document).ready(function(){ 
    $('.nav').on('click', 'a', function(e) { 
     e.preventDefault(); 
     $('.active).removeClass('active'); 
     $(this).addClass('active'); 
    }); 
}); 

Answer 3

Как CSS, кажется, обратиться к «активный» класс применяется к элементам LI, это следует сделать трюк:

$(document).ready(function() { 

    $('.nav a').click(function(e) { 

    //optional - override the link - uncomment the following line: 
    //e.preventDefault(); 

    //remove the active class from all li elements 
    $('.nav li').removeClass('active'); 

    //add it to the li element holding the clicked link 
    $(this).parent('li').addClass('active'); 

    }); 

});