您当前的位置:首页 > wordpress

让Elementor Tab选项卡悬停展开

时间:2026-06-15 11:35:36    来源:    作者:
Elementor编辑器自带的Tab选项卡现在已经比较好用的,配合容器嵌套功能,可以做多各种各样的内容展示效果,但是这个自带的Tab选项卡有个小缺陷,就是每个选项卡需要点击才能展开,没办法让这个Elementor Tab选项卡悬停展开。
就是使用代码了,下面是悦然wordpress建站自用的一段js代码:

jQuery(document).ready(function($) {
      console.log('使用激进选择器初始化');

       function initHoverTabs() { // 尝试多种可能的选择器
            var selectors = [
                             '.elementor-tab-title',
                             '.e-tab-title',
                              '[role="tab"]',
                              '.elementor-tab-toggle',
                              '.e-tab-toggle',
                               'a[data-tab]',
                              'div[data-tab]' ]; var found = false; selectors.forEach(function(selector) { if ($(selector).length > 0) { console.log('找到选择器: ' + selector + ', 数量: ' + $(selector).length); $(selector).hover(function() { console.log('悬停事件触发'); // 尝试多种点击方式 $(this).click(); // 方法1: jQuery点击 if (typeof $(this).get(0).click === 'function') { $(this).get(0).click(); // 方法2: 原生DOM点击 } if (typeof $(this).get(0).dispatchEvent === 'function') { var event = new MouseEvent('click', { view: window, bubbles: true, cancelable: true }); // 方法3: 创建自定义事件 $(this).get(0).dispatchEvent(event); } }); found = true; } }); if (!found) { console.log('未找到任何Tab元素,将在1秒后重试'); setTimeout(initHoverTabs, 1000); } else { console.log('Tab悬停功能成功初始化'); } } // 立即执行 initHoverTabs(); });

大家把上面的添加添加到wp code插件中就可以了,然后刷新网站或清空缓存即可生效。
推荐资讯