javascript - 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>