Переключение класса JQuery

Question

У меня есть две кнопки внутри списка, и я хочу иметь возможность переключать класс между ними при нажатии.

Я новичок в JQuery и написал несколько строк, но он не работает, хотя все правильно связано с консолью Chrome.

Вот HTML:

<ul class="tab-group"> 
    <li class="tab active"><a href="#signup">Sign Up</a></li> 
    <li class="tab"><a href="#login">Log In</a></li> 
</ul> 

и вот соответствующий Jquery:

$('.tab a').click(function) { 
    e.preventDefault(); 
    $(this).parent().addClass('active'); 
    $(this).parent().siblings().removeClass('active'); 
    target = $(this).attr('href'); 
    $('.tab-content > div').not(target).hide(); 
    $(target).fadeIn(600); 
}); 

Спасибо заранее!

Так что, похоже, сейчас он работает, частично, он не работает на моей полной HTML-странице, но при использовании только <ul>, поэтому я буду переделывать его с самого начала и найти, где он идет не так.

Большое спасибо за все ваши ответы!

Answer 1

1. Вы имели синтаксическую ошибку - он должен быть $('.tab a').click(function() {
2. Если вы хотите использовать объект события (e.preventDefault() в коде), вы должны добавить его в объявлении функции - function(e) {, в противном случае переменная e не определены.

Вот исправление к коду:

$('.tab a').click(function(e) { 
 
    e.preventDefault(); 
 
    $(this).parent().addClass('active'); 
 
    $(this).parent().siblings().removeClass('active'); 
 
    target = $(this).attr('href'); 
 
    $('.tab-content > div').not(target).hide(); 
 
    $(target).fadeIn(600); 
 
});

.active { 
 
    background: blue; 
 
} 
 
.active a { 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="tab-group"> 
 
    <li class="tab active"><a href="#signup">Sign Up</a></li> 
 
    <li class="tab"><a href="#login">Log In</a></li> 
 
</ul>