Как я могу переключить цвет ссылки с помощью jquery

Question

Например, если у меня есть раскрывающаяся навигация, я бы хотел, чтобы активная ссылка имела другой цвет, чем остальная часть ссылки на навигацию. Что-то похожее на: http://www.emerson.edu/.

Вот мой JQuery код:

if ($(".testHeader a#" + thisID).hasClass("active")) { 
    $(".testHeader a").removeClass("active"); 
} else { 
    $(".testHeader a").removeClass("active"); 
    $(".testHeader a#" + thisID).addClass("active"); 
} 

Где мой active класс стиль CSS, который изменяет цвет ссылки.

Проблема, что у меня есть, заключается в том, что каждая ссылка остается активной, если я нажимаю более 1 ссылки. Я действительно хочу, чтобы только одна ссылка была активной при нажатии. Что не так, мой jquery? Благодаря!

Answer 1

Вы можете просто сказать

$(".testHeader a#"+thisID).toggleClass("active"); 

Answer 2

Использование this. Сначала удалите все активные классы при запуске события, а затем добавьте класс к текущему выбранному объекту, this.

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

EDIT: Для того, чтобы закрыть его, нажав еще раз, сделайте это.

$('a').click(function(){ 
    if($(this).hasClass('active')){ 
     $(this).removeClass('active'); 
    }else{ 
     $('a').removeClass('active'); 
     $(this).addClass('active'); 
    } 

}); 

Answer 3

Это поможет узнать, что такое «событие», на котором это происходит.

Если это hover событие. Тогда вы могли бы сделать что-то вроде:

$('.testHeader a').hover(function(e) { $(this).toggleClass('active'); }); 

// However, if any of your links are dynamic or a half dozen other issues, this could misfire 
// Thus I would really suggest the long form as: 

$(document).on('mouseenter', '.testHeader a', function(e) { 
    $(this).addClass('active'); 
}) 
.on('mouseleave', '.testHeader a', function(e) { 
    $(this).removeClass('active'); 
}) 

Если на click событие, то вы можете сделать:

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