多个同样式的div层的tab切换模块如何避免 不兼容，

<ul class="tabs">
    <li cc-status="" flex="1" data-target="fuhuo3">Tab 1</li>
    <li cc-status="" flex="1" data-target="fuhuo4">Tab 2</li>
    <!-- 其他 tab 项 -->
</ul>
<div class="tabs-chain">
    <div gap="2xl" class="index-section" id="fuhuo3">
        111
    </div>
    <div gap="2xl" class="index-section" id="fuhuo4">
        222
    </div>
    <!-- 其他内容区域 -->
</div>

// 选择所有包含 tab 的容器
const tabContainers = document.querySelectorAll('.index-section--wide, .subcontents');

tabContainers.forEach((container) => {
    const tabs = container.querySelectorAll('.tabs li');

    // 初始化
    if (tabs.length > 0) {
        const firstTab = tabs[0];
        firstTab.setAttribute('cc-status', 'active');
        const targetId = firstTab.dataset.target;
        const targetContent = document.getElementById(targetId);
        if (targetContent) {
            targetContent.style.display = 'block';
        }
    }

    tabs.forEach((tab) => {
        tab.addEventListener('click', (e) => {
            e.preventDefault();

            // 移除所有 tab 的激活状态
            tabs.forEach((t) => t.setAttribute('cc-status', ''));
            // 激活当前点击的 tab
            tab.setAttribute('cc-status', 'active');

            // 获取当前点击 tab 对应的内容区域的 id
            const targetId = tab.dataset.target;
            if (!targetId) {
                console.error('当前 tab 未设置 data - target 属性');
                return;
            }

            // 隐藏所有内容区域
            const allContents = container.querySelectorAll('.tabs-chain > *');
            allContents.forEach((content) => {
                content.style.display = 'none';
            });

            // 显示对应的内容区域
            const targetContent = document.getElementById(targetId);
            if (targetContent) {
                targetContent.style.display = 'block';
            } else {
                console.error(`未找到 id 为 ${targetId} 的内容区域`);
            }
        });
    });
});

代码解释

1. 自定义属性绑定：通过 data-target 属性，将每个 tab 与对应的内容区域关联起来。

2. 点击事件处理：点击 tab 时，移除其他 tab 的激活状态，激活当前 tab，隐藏所有内容区域，然后根据 data-target 属性找到并显示对应的内容区域。

3. 初始化操作：默认激活第一个 tab 并显示其对应的内容区域。

按照上述方式修改 HTML 并使用优化后的 JavaScript 代码，应该可以解决 fuhuo3 和 fuhuo4 切换不正常的问题。你可以将优化后的代码放在 HTML 文件的 <script> 标签内，或者单独保存为一个 .js 文件并在 HTML 中引入，同时打开浏览器开发者工具查看控制台是否有错误信息。