添加和删除用于切换制表符的类

Question

我正在使用jQuery进行制表符设计，用幻灯片动画在每个选项卡之间切换。我将是第一个承认我还在学习jQuery的人，但是我对它的跳跃而不是流畅的动画和隐藏这两个选项卡有问题。延迟的原因是为了增加过渡，所以它是一个平滑的运动，当它滑动，第二层下降。按钮活动类模仿时间，以获得一个不错的外观。

我在这里..。

jQuery(document).ready(function(){
  jQuery('.schedule-tab-links a[href*="#day2"]').click(function(){
    jQuery('.schedule-tab-active').slideToggle('450');
    jQuery('#day2').delay('450').slideToggle('450');
    jQuery('.button-active').delay('450').removeClass('button-active');
    jQuery('.schedule-tab-links a[href*="#day2"]').delay('450').addClass('button-active');
    jQuery('.schedule-tab-active').delay('450').removeClass('schedule-tab-active');
    jQuery('#day2').delay('450').addClass('schedule-tab-active');
  });
}); 

您可以看到完整的代码这里

Answer 1

.delay(450)对.addClass()/.removeClass()无影响。

它只用于动画。所以你得用.setTimeout()来做这些。

那么，只有当该选项卡尚未激活时，才会发生这种效果，严格吗？否则，它就会毫无意义地上下滑动。

现更新如下：

​

jQuery(document).ready(function(){
  jQuery('.schedule-tab-links a[href*="#day2"]').click(function(){
    if(!$(this).hasClass("button-active")){
      jQuery('.schedule-tab-active').slideToggle('450');
      jQuery('#day2').delay('450').slideToggle('450');
      setTimeout(function(){
        jQuery('.button-active').removeClass('button-active');
        jQuery('.schedule-tab-links a[href*="#day2"]').addClass('button-active');
        jQuery('.schedule-tab-active').removeClass('schedule-tab-active');
        jQuery('#day2').addClass('schedule-tab-active');
      },450);
    }
  });
}); 

.schedule-tab-links {
  margin: 0;
  padding: 0;
  list-style-type: none;
  margin-top: 1em;
}
.schedule-tab-links li {
  display: inline-block;
}
.schedule-tab-links li a {
  padding: .5em;
  background: #e8e8e8;
}
.schedule-tab-links li .button-active {
  background-color: #999;
}
.schedule-tabs {
  padding: 2em; 
  margin-top: 1em;
  display: none;
}
.schedule-tabs.schedule-tab-active {
  display: block;
}
#day1 { background-color: green; }
#day2 { background-color: grey; }
#day3 { background-color: purple; }
#day4 { background-color: orange; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ul class="schedule-tab-links">
  <li><a href="#day1" class="button-active">Day 1</a></li>
  <li><a href="#day2">Day 2</a></li>
  <li><a href="#day3">Day 3</a></li>
  <li><a href="#day4">Day 4</a></li>
</ul>
<div id="day1" class="schedule-tabs schedule-tab-active">Day 1 content goes here</div>
<div id="day2" class="schedule-tabs">Day 2 content goes here</div>
<div id="day3" class="schedule-tabs">Day 3 content goes here</div>
<div id="day4" class="schedule-tabs">Day 4 content goes here</div>
</body>
</html>

​

那么，我建议你在那些标签上也用一个类.为了稍微改变这个点击处理程序..。而不是重复4次或更多次。

$(this)的用法是一种暗示。

;)