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>