如何在jQuery中为Elementor自定义标签添加激活态颜色？

步骤1：修改JS代码，添加激活状态类 #

原来的代码只处理了标签对应内容的显示隐藏，没有给激活标签添加标识类。我们需要在点击时给当前标签加上active类，并移除其他标签的该类：

var $ = jQuery
$(document).ready(function(){
    // 初始化默认激活第一个标签
    const $tabs = $('[data-target]');
    $tabs.first().addClass('active');
    $('.all-section').hide();
    $('#' + $tabs.first().attr('data-target')).show();

    $tabs.on('click', function(){
        // 清除所有标签的激活状态
        $tabs.removeClass('active');
        // 给当前点击的标签添加激活类
        $(this).addClass('active');
        
        const target = $(this).attr('data-target');
        $('.all-section').hide();
        $('#' + target).show();
    })
})

步骤2：复用导航菜单的激活样式 #

找到你网站导航菜单激活状态的CSS样式（比如Elementor导航的.current-menu-item类），把标签的.active类样式设置成和它一致：

方法A：直接复制导航样式属性

打开浏览器开发者工具，查看导航激活项的样式，把对应的属性复制到标签的.active类中：

[data-target].active {
    color: #ff5722; /* 替换成你导航的激活色 */
    border-bottom: 2px solid #ff5722; /* 如果导航有下划线等样式也同步 */
    font-weight: 600;
}

方法B：使用Elementor全局颜色变量

如果你的导航用了Elementor全局颜色，直接调用全局变量更灵活，不用硬编码颜色值：

[data-target].active {
    color: var(--e-global-color-primary); /* 替换成你导航使用的全局色变量 */
    border-bottom-color: var(--e-global-color-primary);
}

验证效果 #

保存修改后刷新页面，点击标签就能看到激活状态的颜色和导航菜单完全一致了。

内容的提问来源于stack exchange，提问作者Saiful Islam