JQuery класс изменения при нажатии ссылки

Question

Я новичок в JQuery, я знаю, этот вопрос уже ответил на другие должности, но, пожалуйста, помогите мне в этом, Как я могу изменить класс <li> тега, если ссылка <a> является нажал?

<li class="link" id="home" > 
    <a href="admin?main=home">Home</a> 
</li> 
<li class="link" id="flt" > 
    <a href="admin?main=flt">FLT</a> 
</li> 

Это то, что я пытался до сих пор:

$('li').click(function() { 
    $("li.active").removeClass("active"); 
    $(this).addClass('active'); 
}); 

Пожалуйста, объясните мне ответ, другие сообщения, похожий на мой, не так много деталей, так что я действительно не понять, как они это делают?

Answer 1

Используйте следующий скрипт. http://jsfiddle.net/czG8h/

$('.link a').click(function() { 
    $("li.active").removeClass("active"); 
    $(this).closest('li').addClass('active'); 
}); 

Если вы хотите, чтобы сохраняться активный стиль по всей странице, то следующий код будет делать трюк для вас:

$(document).ready(function() { 
     var pageTitle = window.location.pathname.replace(/^.*\/([^/]*)/ , "$1"); 

     ///// Apply active class to selected page link 
     $('.link a').each(function() { 

      if ($(this).attr('href').toLowerCase() == pageTitle.toLocaleLowerCase()) 
       $(this).closest('li').addClass('active'); 
     }); 

    }); 

Answer 2

При нажатии на элемент, фактическая цель клика является a Элемент, действие по умолчанию которого предназначено для перехода к ресурсу, указанному в свойстве href.

В этом случае вы регистрируете событие click в событии li, этот обработчик запускается из-за event bubbling, где событие, происходящее в элементе потомка, будет закручиваться до корня документа.

Таким образом, решение состоит в том, чтобы предотвратить действие по умолчанию события click (в данном случае навигацию элемента a), вызвав .preventDefault() на событие.

var $lis = $('li').click(function(e) { 
    $lis.filter(".active").removeClass("active"); 
    $(this).addClass('active'); 
    e.preventDefault() 
}); 

Answer 3

Используйте .closest, чтобы добраться до родительского лития и добавить класс активные затем использовать брат и сестра, чтобы найти другую Ли и удалить класс активными, и использовать e.preventDefault() для предотвращения изменения страницы.

$('li a').click(function(e) { 
    e.preventDefault(); 
    $(this).closest('li').addClass('active').siblings('.active').removeClass('active'); 
}); 

DEMO