Bricks Tabs 自动轮播：滚动到可视区后自动切换标签页

场景：标签页自动轮播

产品展示、数据看板、营销页里经常想要「标签页自动轮播」：页面一打开（或滚动到 Tabs 元素时），每隔几秒自动切换到下一个标签页，像轮播图一样吸引注意力。Bricks 的 Tabs (Nestable) 元素本身没有这个能力，需要一小段 JavaScript。

本文代码来自 BricksLabs 免费教程（代码由 ChatGPT 生成、作者审校），实现两个关键行为：

1. 进入视口才播放：用 IntersectionObserver 监听 Tabs 容器，滚动到可视区才开始轮播，离开视口立即暂停——避免页面底部没人看的标签页空转。
2. 每隔 3 秒切换：用 setInterval 依次激活下一个 tab title / tab pane。

Step 1：给 Tabs 元素添加 CSS 类

在编辑器中选中 Tabs (Nestable) 元素，右侧面板 STYLE → CSS，把 autoplaying-tabs 填进 CSS classes 输入框。这个类名是 JS 的选择器锚点，脚本只会处理带这个类的 Tabs 容器。

Step 2：在页脚脚本粘贴轮播代码

点击编辑器顶部的齿轮图标（Settings）→ PAGE SETTINGS → CUSTOM CODE，在 Body (footer) scripts 里粘贴以下代码（原样保留）：

<script>
        document.addEventListener('DOMContentLoaded', function () {
            const tabsContainer = document.querySelector('.autoplaying-tabs');
            const tabTitles = tabsContainer.querySelectorAll('.autoplaying-tabs .tab-title');
            const tabPanes = tabsContainer.querySelectorAll('.autoplaying-tabs .tab-pane');
            let activeIndex = 0;
            let autoPlayInterval;

            // Helper function to handle the activation of tabs
            function activateTab(index) {
                tabTitles.forEach((title, i) => {
                    if (i === index) {
                        title.classList.add('brx-open');
                    } else {
                        title.classList.remove('brx-open');
                    }
                });

                tabPanes.forEach((pane, i) => {
                    if (i === index) {
                        pane.classList.add('brx-open');
                    } else {
                        pane.classList.remove('brx-open');
                    }
                });
            }

            // Function to kick-start the auto-play
            function startAutoPlay() {
                autoPlayInterval = setInterval(() => {
                    activeIndex = (activeIndex + 1) % tabTitles.length;
                    activateTab(activeIndex);
                }, 3000); // Switch every 3 seconds
            }

            // Function to stop the auto-play
            function stopAutoPlay() {
                clearInterval(autoPlayInterval);
            }

            // Intersection observer to detect scrolling into view
            const observer = new IntersectionObserver(entries => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        console.log('Tabs container is in view. Starting Auto-Play.');
                        startAutoPlay();
                    } else {
                        console.log('Tabs container is out of view. Stopping Auto-Play.');
                        stopAutoPlay();
                    }
                });
            }, { threshold: 0.1 });

            observer.observe(tabsContainer);
        });
    </script>

想改切换间隔，把 setInterval 的 3000（毫秒）改成你要的数值即可。

原理说明

• .tab-title / .tab-pane：Bricks Tabs (Nestable) 前端渲染出的标题按钮和内容面板，二者靠 .brx-open 类控制激活态——加上它显示/展开，去掉它隐藏/收起。脚本不模拟点击，而是直接增删这个类，等效于切换标签页。
• activeIndex = (activeIndex + 1) % tabTitles.length：取模运算让索引在 0 → 1 → 2 → 0 之间循环，实现「最后一个切回第一个」的轮播。
• IntersectionObserver：现代浏览器原生 API，异步监听目标元素与视口的交叉情况，threshold: 0.1 表示元素露出 10% 即触发 startAutoPlay()，完全离开视口触发 stopAutoPlay()。相比 scroll 事件监听，它不需要手动计算滚动位置，性能更好。
• 注意事项：脚本假设每页只有 1 个 带 autoplaying-tabs 类的 Tabs 元素，多个会互相干扰。

进阶：鼠标悬停暂停、多个 Tabs 并存

两点实用改进：

• 悬停暂停：给 tabsContainer 加 mouseenter 时 stopAutoPlay()、mouseleave 时重启，访客想仔细看某个标签内容时轮播不会抢戏。
• 多个 Tabs：原脚本用 querySelector 只取第一个匹配元素。改成 document.querySelectorAll('.autoplaying-tabs') 遍历，每个容器各维护一套 activeIndex 和 autoPlayInterval，页面多个轮播 Tabs 互不干扰。

小结

这套方案零依赖、零插件，纯原生 JS 就能给 Tabs 加上轮播效果。核心思路可以迁移到其他元素：任何 Bricks 组件只要通过类名增删 brx-open 就能被脚本驱动——手风琴、Offcanvas、Popup 的自动切换都能照这个模式写。要注意的是轮播本质是「替用户点击」，务必保证每个标签内容在激活前也正常渲染，避免 SEO 和首屏体验受影响。