请求简化重复的jQuery标签点击动画代码

AI 小北

2026-7-8

jQuery代码简化方案

方案一：不修改HTML结构，直接简化JS

// 统一绑定所有标签的点击事件
jQuery("#state-of-the-art .fl-tabs-label, #everything-you-need .fl-tabs-label, #monitor-your-sites .fl-tabs-label").click(function() {
  // 找到当前点击标签所在的父容器
  const $container = jQuery(this).closest('[id]');
  // 调用通用动画函数处理对应面板
  animateTabPanel($container.find('.fl-tabs-panel'));
});

// 提取通用的动画逻辑函数
function animateTabPanel($panel) {
  $panel.addClass("tab-animation-fadeup");
  setTimeout(function () {
    $panel.removeClass("tab-animation-fadeup");
  }, 400);
}

方案二：给容器加公共类（更优雅，推荐）

如果可以修改HTML，给三个带ID的容器都加一个公共类（比如tab-group）：

<div id="state-of-the-art" class="tab-group">...</div>
<div id="everything-you-need" class="tab-group">...</div>
<div id="monitor-your-sites" class="tab-group">...</div>

对应的JS代码会更简洁：

// 绑定所有tab-group下的标签点击事件
jQuery(".tab-group .fl-tabs-label").click(function() {
  const $panel = jQuery(this).closest('.tab-group').find('.fl-tabs-panel');
  animateTabPanel($panel);
});

function animateTabPanel($panel) {
  $panel.addClass("tab-animation-fadeup");
  setTimeout(() => $panel.removeClass("tab-animation-fadeup"), 400);
}