JavaScript实现的Tab菜单按钮点击页面其他区域丢失焦点问题求助

问题说明 #

用JavaScript实现Tab菜单时，点击页面任意非按钮区域，当前激活的Tab按钮会失去焦点，导致:focus样式消失。需要维持当前Tab的激活样式，无论点击页面哪里。

方案一：自定义激活类（推荐） #

原生:focus状态是浏览器的交互逻辑，强行修改可能影响无障碍体验，更稳妥的方式是用自定义的.active类标记当前激活的Tab，样式和:focus保持一致。

步骤1：添加.active类样式 #

#site #menu #tab_box #tab_bar .tab_button:focus,
#site #menu #tab_box #tab_bar .tab_button.active {
    color: rgba(255, 255, 255);
    background-color: rgba(20, 33, 45);
}

步骤2：修正并修改JavaScript逻辑 #

修复原openLink函数的循环长度错误，改为切换.active类来管理激活状态：

function openLink(evt, animName) {
    var i, x, tablinks;
    // 隐藏所有内容区域
    x = document.getElementsByClassName("content");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    // 移除所有Tab按钮的active类
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].classList.remove("active");
    }
    // 显示当前内容区域，给当前按钮添加active类
    document.getElementById(animName).style.display = "flex";
    evt.currentTarget.classList.add("active");
}

步骤3：绑定页面点击事件 #

确保点击其他区域时，当前激活Tab的.active类不会被移除：

document.addEventListener('DOMContentLoaded', function() {
    // 初始化记录当前激活的Tab按钮
    let activeTab = document.querySelector('.tablink.active') || document.getElementById('blink1');
    
    document.addEventListener('click', function(e) {
        // 点击非Tab按钮时，维持当前激活Tab的样式
        if (!e.target.classList.contains('tablink') && activeTab) {
            activeTab.classList.add('active');
        } else if (e.target.classList.contains('tablink')) {
            activeTab = e.target;
        }
    });
});

方案二：强制保持按钮焦点 #

如果一定要依赖:focus状态实现样式，可以通过代码强制让当前激活按钮保持焦点：

修改JavaScript逻辑 #

function openLink(evt, animName) {
    var i, x, tablinks;
    x = document.getElementsByClassName("content");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].blur();
    }
    document.getElementById(animName).style.display = "flex";
    // 强制给当前按钮聚焦
    evt.currentTarget.focus();
}

// 监听页面点击，点击非按钮区域时重新聚焦当前激活按钮
document.addEventListener('DOMContentLoaded', function() {
    let activeTab = document.getElementById('blink1');
    
    document.addEventListener('click', function(e) {
        if (!e.target.classList.contains('tablink')) {
            activeTab.focus();
        } else {
            activeTab = e.target;
        }
    });
});

注意事项 #

这种方式会覆盖浏览器默认焦点行为，可能影响键盘导航等无障碍功能，谨慎使用。

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