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>