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>