按钮下划线持久化问题：激活状态下保留直至切换其他按钮

问题核心 #

你当前的问题根源在于：

• CSS依赖:focus/:active这类临时状态伪类，点击页面其他区域后焦点丢失，下划线随之消失；
• JS未处理页面初始加载时的默认激活状态，且toggleClass的逻辑可能导致激活状态被意外移除。

1. 修正CSS样式 #

直接给.active类设置下划线样式，摆脱对焦点/激活伪类的依赖，确保只要类存在就会显示下划线：

.active {
    text-decoration: underline;
}
/* 可选优化：移除按钮默认焦点框，避免视觉干扰 */
button:focus {
    outline: none;
}

2. 修复并完善JS逻辑 #

• 确保代码在DOM完全加载后执行；
• 页面初始化时给默认激活的按钮添加.active类；
• 点击按钮时直接为当前按钮添加激活类，移除兄弟按钮的激活类，避免toggleClass导致的异常：

jQuery(document).ready(function() {
    // 页面加载时，给默认激活的按钮添加active类（示例取第一个按钮，可根据需求调整选择器）
    var $defaultBtn = jQuery('button').first();
    $defaultBtn.addClass('active');

    // 按钮点击切换逻辑
    var $buttons = jQuery('button');
    $buttons.on('click', function() {
        jQuery(this).addClass('active').siblings('button').removeClass('active');
    });
});

3. 适配WordPress的额外处理 #

如果在WordPress环境中出现代码冲突，可使用noConflict模式包裹代码：

jQuery.noConflict();
(function($) {
    $(document).ready(function() {
        var $defaultBtn = $('button').first();
        $defaultBtn.addClass('active');

        var $buttons = $('button');
        $buttons.on('click', function() {
            $(this).addClass('active').siblings('button').removeClass('active');
        });
    });
})(jQuery);

可选调整 #

如果默认激活的按钮不是第一个，可给目标按钮添加自定义属性（比如data-default-active="true"），再通过精准选择器定位：

var $defaultBtn = jQuery('button[data-default-active="true"]');
$defaultBtn.addClass('active');

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