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插件中就可以了,然后刷新网站或清空缓存即可生效。