jQuery пункт меню выбрано

Question

Я все!

У меня есть это меню:

<ul id="navigation"> 
     <li><a href="index.php">Home</a></li> 
     <li><a href="index.php?page=Entidad">Entidad</a></li> 
    </ul> 

С JQuery Я Тринг применить класс .active, когда пункт меню щелкнул, как:

$(document).ready(function(){ 
     $("li a").click(function(){ 
      $(this).parent().find("li").addClass('active'); 
     }); 
    }); 

Это не работает, не могли бы вы помочь мне?

Answer 1

parent от a is li это само собой, поэтому вам не нужно find li.

Live Demo

$(document).ready(function(){ 
     $("li a").click(function(){ 
      $(this).parent().addClass('active'); 
     }); 
}); 

Редактировать Чтобы удалить класс из предыдущих элементов и добавить к текущему

Live Demo

$(document).ready(function(){ 
     $("li a").click(function(event){ 
      $('#navigation li').removeClass(); 
      $(this).parent().addClass('active'); 
     }); 
}); 

Answer 2

При обращении щелканья, li является родительским элементом, так что просто сделать:

$(this).parent().addClass('active'); 

Вы уверены в этом, хотя, как я бы подумал, что это разумно, чтобы сделать ссылку активной вещи? Просто наблюдение. не

Answer 3

Его просто

$(this).parent().addClass('active'); // $(this).parent() selects list element 

Нет необходимости снова найти Li элемент там.

Answer 4

Ваша страница будет обновлена ​​после нажатия гиперссылки, чтобы этот код $(this).parent().addClass('active') не собирался работать.

Попробуйте вместо этого:

$(function() { 
       var page = getParameterByName('page'); 
       $("#navigation a:contains('" + page + "')").parent().addClass('active'); 
      }); 

      function getParameterByName(name) 
      { 
       name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); 
       var regexS = "[\\?&]" + name + "=([^&#]*)"; 
       var regex = new RegExp(regexS); 
       var results = regex.exec(window.location.search); 
       if(results == null) 
       return "Home"; 
       else 
       return decodeURIComponent(results[1].replace(/\+/g, " ")); 
      }