Elementor自定义自动切换标签问题求助：首个标签内容无法隐藏

你的问题核心原因很明确：CSS里的.first-box类用了!important强制设置display: block，这个优先级远高于JS动态添加的样式，导致不管切换到哪个标签，第一个内容容器都会始终显示。

修复方案 #

1. 调整CSS代码

直接移除.first-box的强制显示样式，避免和JS的控制逻辑冲突：

.tab::after {
  content: '';
  display: block;
  border-bottom: 3px solid #c41230;
  transform: scalex(0);
  transition: transform 0ms ease-out;
}
.tab.active::after {
  transform: scalex(1) !important;
  transform-origin: 0% 50% !important;
  transition: transform 5000ms ease-in;
  background: #000 !important;
}

.box{
    display: none;
}

2. 优化JS逻辑

去掉对.first-box类的依赖，直接通过索引控制初始状态，同时增加手动切换后重置定时器的逻辑，提升体验：

jQuery(document).ready(function ($) {
    let index = 0;
    let delay = 5000;
    let $tabs = $(".tab-wrap .tab");
    let $contents = $(".content-wrap .box");
    let interval = setInterval(rotate, delay);

    // 初始激活第一个标签并显示对应内容
    $contents.hide();
    $contents.eq(index).show();
    $tabs.eq(index).addClass("active");

    $tabs.each(function (i) {
        $(this).click(function () {
            if (index !== i) {
                index = i;
                // 手动切换后重置定时器，避免自动切换干扰操作
                clearInterval(interval);
                interval = setInterval(rotate, delay);
                switchElement();
            }
        });
    });

    function rotate() {
        index++;
        if (index >= $tabs.length) {
            index = 0;
        }
        switchElement();
    }

    function switchElement() {
        $tabs.removeClass("active");
        $tabs.eq(index).addClass("active");
        
        $contents.hide();
        $contents.eq(index).delay(300).fadeIn(300);
    }
});

额外说明 #

• 移除.first-box的强制样式后，JS可以完全接管所有内容容器的显示/隐藏状态
• 手动点击标签时重置定时器，能避免刚手动切换就触发自动切换的突兀感
• 初始状态通过索引控制，不需要额外的first-box类，逻辑更简洁稳定

内容的提问来源于stack exchange，提问作者saif Rafi