Question

尝试使用三个按钮设置一个简单的网页，其中单击每个按钮会显示一个不同的div并隐藏其他div。我已经设法使其与.show（）或.hide（）一起使用，但是我宁愿使用.fadein（）、. fadeout（）或.fadeto（）来使动画更流畅。但是，渐变命令不会触发，任何.animate命令或.slide命令也不会触发。

我的HTML代码：

<a class="curriculum" href="#">Click One</a>
<a class="small-groups" href="#">Click Two</a>
<a class="resources" href="#">Click Three</a>

<p id="curriculum">
  TESTING
</p>
<p id="small-groups">
  LOL ONE
</p>
<p id="resources">
  TWO THREE
</p>

我的CSS代码：

#curriculum {
  display: none;
}

#small-groups {
  display: none;
}

#resources {
  display: none;
}

我的jQuery代码：

jQuery(document).ready(function() {
  $('curriculum').click(function() {
    $('#curriculum').fadeto(1000, 1);
    $('#small-groups').fadeto(1000, 0);
    $('#resources').fadeto(1000, 0);
  });
  $('small-groups').click(function() {
    $('#small-groups').fadeto(1000, 1);
    $('#curriculum').fadeto(1000, 0);
    $('#resources').fadeto(1000, 0);
  });
  $('resources').click(function() {
    $('#resources').fadeto(1000, 1);
    $('#small-groups').fadeto(1000, 0);
    $('#curriculum').fadeto(1000, 0);
  });
});

这是我根据代码构建的jsfiddle和问题：https://jsfiddle.net/darchaf/q83jkrwg/5/

我希望单击链接时会显示一个div，单击下一个按钮时会显示一个不同的div。但是代码不会触发任何东西。

Answer 1

弄清楚了-愚蠢的我在语法上犯了一个错误。

该代码现在可以使用以下jQuery工作：

jQuery(document).ready(function() {
  $('.curriculum').click(function() {
    $('#curriculum').fadeIn(800);
    $('#small-groups').hide();
    $('#resources').hide();
  });
  $('.small-groups').click(function() {
    $('#small-groups').fadeIn(800);
    $('#curriculum').hide();
    $('#resources').hide();
  });
  $('.resources').click(function() {
    $('#resources').fadeIn(800);
    $('#small-groups').hide();
    $('#curriculum').hide();
  });
});

对jquery进行故障排除。FadeTo无法正常工作

1 个答案: