点击子Tab按钮时子标签页内容消失问题求助（附完整代码）

问题根源 #

1. 子Tab按钮绑定错误函数：CPU按钮调用的是父Tab的openTab函数，会隐藏所有父Tab内容（包括PC Tab），导致子Tab跟着消失。
2. 子Tab按钮类名不匹配：JS中openSubTab查找subtablinks类，但HTML里按钮用的是tablinks，无法给子Tab按钮添加激活状态。
3. HTML结构错误：#pc的<div>未闭合，导致后续父Tab被错误嵌套进PC Tab内部。
4. 初始化调用参数错误：DOM加载完成时调用openSubTab传入的event不是按钮点击事件，会触发evt.currentTarget报错。

修复代码 #

修改后的HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A game about a person trying to analyze all chess positions">
        <link rel="stylesheet" href="./css/main.css">
        <link rel="stylesheet" href="./css/pc-upgrade.css">
        <link rel="stylesheet" href="./css/tab.css">
    </head>
    <body>
        <div class="tab">
            <button class="tablinks" onclick="openTab(event, 'pc')">PC</button>
            <button class="tablinks" onclick="openTab(event, 'upgrades')">Upgrades</button>
            <button class="tablinks" onclick="openTab(event, 'options')">Options</button>
        </div>
        <div id="pc" class="tabcontent">
            <div class="subtab">
                <button class="subtablinks" onclick="openSubTab(event, 'cpu')">CPU</button>
            </div>
            <div id="cpu" class="subtabcontent">
                <div class="stat">
                    <div id="positions"></div>
                    <div id="pps"></div>
                </div>
                <div class="cpustats">
                    <div id="cpuCount"></div>
                    <div id="mult"></div>
                    <button id="buycpu"></button>
                </div>
                <div class="pc-upgrade">
                    <div id="cpu-upgrade">
                        <div id="boosterCount"></div>
                        <button class="disabled" id="booster"></button>
                    </div>
                </div>
            </div>
        </div>
        <div id="upgrades" class="tabcontent">
            <div id="u1">PLACEHOLDER</div>
        </div>
        <div id="options" class="tabcontent">
           <button id="savegame">Save your game</button>
           <button id="loadgame">Load your game</button>
        </div>
        <script src="js/pc-upgrade.js"></script>
        <script src="js/main.js"></script>
        <script src="js/tabs.js"></script>
        <script src="js/save.js"></script>
    </body>
</html>

修改后的JS

function openTab(evt, tabName) {
    var i, tabcontent, tablinks;

    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}

document.addEventListener('DOMContentLoaded', function() {
    openTab({ currentTarget: document.querySelector('.tablinks[onclick="openTab(event, \'pc\')"]') }, 'pc');
    const cpuSubTabBtn = document.querySelector('.subtablinks[onclick="openSubTab(event, \'cpu\')"]');
    if (cpuSubTabBtn) {
        openSubTab({ currentTarget: cpuSubTabBtn }, 'cpu');
    }
});

function openSubTab(evt, subTabName) {
    var i, subtabcontent, subtablinks;

    subtabcontent = document.getElementsByClassName("subtabcontent");
    for (i = 0; i < subtabcontent.length; i++) {
        subtabcontent[i].style.display = "none";
    }

    subtablinks = document.getElementsByClassName("subtablinks");
    for (i = 0; i < subtablinks.length; i++) {
        subtablinks[i].className = subtablinks[i].className.replace(" active", "");
    }

    document.getElementById(subTabName).style.display = "block";
    evt.currentTarget.className += " active";
}

修改后的CSS

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
}
.tab button:hover {
    background-color: #ddd;
}
.tab button.active {
    background-color: #ccc;
}
.tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
}

.subtab {
    overflow: hidden;
    border: 1px solid #ccc;
}
.subtab .subtablinks {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}
.subtab .subtablinks:hover {
    background-color: #ddd;
}
.subtab .subtablinks.active {
    background-color: #ccc;
}
.subtabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
}

修复说明 #

• 子Tab按钮绑定openSubTab函数，避免触发父Tab的隐藏逻辑。
• 子Tab按钮使用subtablinks类名，匹配JS中的选择器，确保激活状态正常添加。
• 闭合#pc的div，修复HTML结构错误。
• 初始化时直接获取按钮元素构造模拟event对象，避免DOMContentLoaded事件导致的currentTarget报错。

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