javascript - 在 Webflow 中的特定部分启用自定义代码

Question

我不确定它是否重要，但我使用 Webflow 作为我的 Web 构建工具，并在那里使用自定义代码来启用选项卡的自动播放。

我很确定我的问题可能与一般 java 脚本主题有关，因为所有元素都有类，并且您使用 Webflow 中的代码就像从头开始编写网站一样。

我正在使用以下代码，因此选项卡每 15 秒自动切换一次：

<script>
    var Webflow = Webflow || [];
    Webflow.push(function() {
        var tabTimeout;
        clearTimeout(tabTimeout);
        tabLoop();

        // define loop - cycle through all tabs
        function tabLoop() {
            tabTimeout = setTimeout(function() {
                var $next = $('.tabs-menu').children('.w--current:first').next();

                if ($next.length) {
                    $next.removeAttr("href").click(); // click resets timeout, so no need for interval
                } else {
                    $('.tab-link:first').removeAttr("href").click();
                }
            }, 15000);
        }

        // reset timeout if a tab is clicked
        $('.tab-link').click(function() {
            clearTimeout(tabTimeout);
            tabLoop();
        });
    });
</script>

问题是带有标签的部分不是标题部分，而是网站底部的部分，所以当我将网站向下滚动到该部分时，自动播放脚本很久以前就已经开始了，一旦我到达该部分几乎所有选项卡中的最后一个选项卡都打开了。所以投资组合不是从第一个项目开始的。

是否有要添加的代码片段以确保仅当这些选项卡滚动到视图中时才启用我上面发布的代码？

标签： javascripttabswebflowcustom-code